13

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

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

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

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

サーバー側のソースを変更して、固定幅の HTML を生成することができません。そしてどうしても方法があれば CSS だけで解決したいです。

子の数に関係なく、すべての子を親の幅に自動調整するにはどうすればよいですか?

4

3 に答える 3

13

使用できますdisplay: table-cell：

参照: http://jsfiddle.net/6nSEj/12/ (または 5 人の子供)

これは IE7 では機能しません。なぜなら、そのブラウザーは単純にdisplay: tableand friends をサポートしていないからです。

div.parent {
    ..
    width: 100%;
    display: table;
    table-layout: fixed;
}
div.parent a {
    ..
    display: table-cell;
}
于 2011-05-02T21:39:24.447 に答える
9

これはすでにかなり古い質問です。当時は十分な回答が寄せられていましたが、今日では、Flexible Box Layoutは同じ結果をよりシンプルに提供し、最新のすべてのブラウザーで適切にサポートされています。強くお勧めします！

/* 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>

于 2016-09-23T12:30:33.327 に答える
0

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

$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");
于 2011-05-02T14:45:06.333 に答える