固定幅なしでDIV
を使用して流動的なレイアウト「ツールバー」を生成し、その中に多くのA
を生成するサーバー側コンポーネントがあります。
次に、そのレイアウトをカスタマイズして、すべてのA
タグを親の幅に自動的に合わせる必要があります。ただし、子の数は可変であり、親の幅は不明です(ウィンドウに自動的にフィットします)。
私はこのフィドルでいくつかのテストを行いました: http://jsfiddle.net/ErickPetru/6nSEj/1/
しかし、動的にする方法が見つかりません(最後のA
タグのコメントを外して、どのように機能しないかを確認してください、笑)。
サーバー側のソースを変更して、固定幅のHTMLを生成することはできません。そして、JavaScriptでもその結果を達成できる方法があれば、CSSでのみ解決したいと思っています。
子の数に関係なく、すべての子を親の幅に自動適合させるにはどうすればよいですか?
これはすでにかなり古い質問です。与えられた答えは当時よく出席していましたが、最近では フレキシブルボックスレイアウト は同じ結果をはるかに単純に提供し、すべての最新のブラウザで 優れたサポート を提供します。強くお勧めします!
/* Important parts */
.parent {
display: flex;
}
.parent a {
flex: 1;
}
/* Decoration */
.parent {
padding: 8px;
border: 1px solid #ccc;
background: #ededed;
}
.parent a {
line-height: 26px;
text-align: center;
text-decoration: none;
border: 1px solid #ccc;
background: #dbdbdb;
color: #111;
}
<div class="parent">
<a href="#">Some</a>
<a href="#">Other</a>
<a href="#">Any</a>
</div>
<br>
<div class="parent">
<a href="#">Some</a>
<a href="#">Other</a>
<a href="#">Any</a>
<a href="#">One More</a>
<a href="#">Last</a>
</div>
display: table-cell
を使用できます:
参照:http://jsfiddle.net/6nSEj/12/( または5人の子供と )
そのブラウザは単にdisplay: table
とその仲間をサポートしていないため、これはIE7では機能しません。
div.parent {
..
width: 100%;
display: table;
table-layout: fixed;
}
div.parent a {
..
display: table-cell;
}
今のところ、多くの人がこの問題の解決策としてjQueryを使用しています。必要なのは1行だけです。これはあなたのフィドルからです。
$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");