html - 如何让 child 仅使用 CSS 自动适应 parent 的宽度？

Question

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

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

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

但我找不到使它动态化的方法(取消注释最后一个 A 标记以查看它是如何工作的，大声笑)。

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

我怎样才能让所有的 child 独立于 child 的数量自动适应 parent 的宽度？

Answer 1

你可以使用display: table-cell:

参见: http://jsfiddle.net/6nSEj/12/ ( or with 5 children )

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

div.parent {
    ..
    width: 100%;
    display: table;
    table-layout: fixed;
}
div.parent a {
    ..
    display: table-cell;
}