13

我有一个服务器端组件,它使用DIV不固定宽度生成流体布局“工具栏”,A在其中生成许多。

然后我需要自定义该布局以使所有A标签自动适应父宽度。但是孩子的数量是可变的,父母的宽度是未知的(它会自动适应窗口)。

我用这个小提琴做了一些测试:http: //jsfiddle.net/ErickPetru/6nSEj/1/

但是我找不到使它动态的方法(取消注释最后一个A标签以查看它是如何不起作用的,哈哈)。

我无法更改服务器端源以生成具有固定宽度的 HTML。如果有任何方法,我真的只想用 CSS 来解决它,即使用 JavaScript 我也可以达到这个结果。

如何使所有孩子自动适应父母的宽度,而与孩子的数量无关?

4

3 回答 3

13

您可以使用display: table-cell

请参阅:http: //jsfiddle.net/6nSEj/12/ 或有 5 个孩子

这在 IE7 中不起作用,因为该浏览器根本不支持display: table和朋友。

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

这已经是一个很老的问题了。尽管当时给出的答案很好,但现在灵活的盒子布局提供了相同的结果,而且更加简单,并且在所有现代浏览器中都得到了很好的支持。我强烈推荐它!

/* 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 作为解决这个问题的方法。你只需要一条线。这是来自你的小提琴。

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