Question

可能不是我写过的最好的头衔，但我发现很难很好地提出这个问题。我正在研究一个应该覆盖100％父母的div（可能是身体）。这个div应该有一个变量数的子项，所以每次页面刷新时，子项数可以从1到10，可能更多。

我希望这些孩子都同样宽并且具有百分比宽度。因此，如果有五个孩子，每个孩子应该width: 20%。如果有两个孩子，他们应该有width: 50%。我可以用JavaScript做到这一点，但我更喜欢在CSS中保留所有布局内容。

有没有办法在不使用表的情况下完成此任务？

Answer 1

您可以定义类似

的内容

div#contains2 div
{
    width: 50%;
}

div#contains3 div
{
    width: 33%;
}

依此类推，然后将适当的类应用于父div。

那就是说，为什么你要避开一个表，但是试图重新创建表的工作方式？当然，它可能不是制作页面的绝对最好的“睡到好”的方式，但是如果表格完成了你想要的工作，你就不会想到其他任何事情，那就去与桌子。

最重要的是，对于自动相同宽度的列，您基本上有3个选项：

表格，开箱即用，可跨浏览，无重大问题
jQuery，如果用户启用了JS，可能会跨浏览器工作
CSS就像我上面建议的那样，它会给你的CSS文件增加膨胀，并且会增加你的标记

Answer 2

使用display: table，display: table-cell和table-layout: fixed。

请参阅： http://jsfiddle.net/thirtydot/ZKXrM/

table-layout: fixed是在没有指定宽度的任何单元格之间平均分配可用宽度。

This works in all modern browsers. It doesn't work in IE7.如果您需要在IE7中使用此功能，请使用JavaScript进行填充，或使用真实的<table>。

<强> CSS：

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.container > div {
    display: table-cell;
    border: 1px dashed red;
}

<强> HTML：

<div class="container">
    <div>1</div>
    <div>2</div>
    ..
</div>

Answer 3

您可以将总宽度（100％）除以项目数（X）。所以W = 100 / X，W =宽度。

是否可以将一组元素的宽度设置为最多100％？

3 个答案: