html - 为每个元素平均分配一个空间

Question

有没有办法在不指定绝对值的情况下为每个元素平均划分空间（或 div）width。只是为了使 CSS 代码灵活。

例如，如果您将这些元素放入 div：

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS 会自动给每个.child元素width=50%

在这个例子中：

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS 也会自动给每个.child元素width=25%

是否可以？

Answer 1

恐怕你必须使用表格并为子 div 添加一个包装，你可以这样做：

#parent{
width: 1000px; /* Example width */
height: 100px; /* Example height */
display: table;
table-layout: fixed;
}
.childwrap {
display:table-row;
}
.child{
display: table-cell;
}

示例：http ://cssdesk.com/rZKRW

Answer 2

您可以使用下面的 jQuery 代码：

var childs = $('#parent .child')
    ,width = Math.floor(100/childs.length);
childs.css('width',width+'%');

Answer 3

你当然可以。只需将具有所需百分比的值应用于 width 属性，并确保将定义的 with 应用于其父级。仅此而已。

.child {
with:50%;
}

或为您的 4 个孩子...

.child {
 width:25%;
}

为此，必须指定祖先宽度。如果祖先宽度取决于子内容，那么就有机会获得未计算的宽度。

如果您的祖先 div 本身具有一个潜在值，那么将要求其祖先具有定义的 with 等等。