如何让孩子只用CSS自动适应父母的宽度？

Question

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

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

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

但是我找不到让它变得动态的方法(取消注释最后一个A标签以查看它是如何工作的,哈哈).

我无法更改服务器端源以使用固定宽度格式化HTML.如果有任何办法,我真的想用CSS解决它,即使用JavaScript我也可以实现这个结果.

如何让所有孩子自己适应父母的宽度,与孩子的数量无关？

Answer 1

你可以使用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;
}

Answer 2

这已经是一个相当老的问题。尽管给出的答案在当时很受欢迎，但如今，“ 灵活框式布局 ”以更简单的方式提供了相同的结果，并在所有现代浏览器中提供了良好的支持。我强烈推荐！

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