html – 如何使孩子自动适应父母的宽度只有CSS？

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

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

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

但是我找不到一种方式使其变得动态(取消注释最后一个标签,看看它不工作,哈哈).

我无法更改服务器端的源,以固定宽度来填充HTML.而且我真的只想用CSS解决它,只要有任何方式,即使是用JavaScript,我也可以达到这个结果.

如何使所有的孩子自动适应父母的宽度,而不管孩子的数量？

解决方法

您可以使用display：table-cell：

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

这不会在IE7中工作,因为浏览器根本不支持显示：表和朋友.

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