web-dev-qa-db-ja.com

CSSだけで子供を親の幅に自動合わせるにはどうすればよいですか？

固定幅なしでDIVを使用して流動的なレイアウト「ツールバー」を生成し、その中に多くのAを生成するサーバー側コンポーネントがあります。

次に、そのレイアウトをカスタマイズして、すべてのAタグを親の幅に自動的に合わせる必要があります。ただし、子の数は可変であり、親の幅は不明です（ウィンドウに自動的にフィットします）。

私はこのフィドルでいくつかのテストを行いました： http://jsfiddle.net/ErickPetru/6nSEj/1/

しかし、動的にする方法が見つかりません（最後のAタグのコメントを外して、どのように機能しないかを確認してください、笑）。

サーバー側のソースを変更して、固定幅のHTMLを生成することはできません。そして、JavaScriptでもその結果を達成できる方法があれば、CSSでのみ解決したいと思っています。

子の数に関係なく、すべての子を親の幅に自動適合させるにはどうすればよいですか？

htmlcsscss-floatwidthfluid-layout
12
Erick Petrucelli

これはすでにかなり古い質問です。与えられた答えは当時よく出席していましたが、最近では フレキシブルボックスレイアウト は同じ結果をはるかに単純に提供し、すべての最新のブラウザで 優れたサポート を提供します。強くお勧めします！

/* 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>
6
Erick Petrucelli

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;
}
13
thirtydot

今のところ、多くの人がこの問題の解決策としてjQueryを使用しています。必要なのは1行だけです。これはあなたのフィドルからです。

$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");
0
Piotr Kula