javascript - 自动调整子 div 的大小，使它们平均共享父 div 的宽度

Question

假设我有一个固定宽度为 320px 的父 div，我希望能够(或者我希望我的用户能够)向父 div 添加任意数量的子 div，并让它们自动调整到分享 parent 的宽度。

我不想更改父级宽度，也不想通过任何类型的滚动溢出来执行此操作 - 我只需要内部的 div 与父级的宽度相等。

例如，

如果只有一个 child 那么宽度是100%，如果有两个那么他们的宽度都是50%等等

我该怎么做？

我用 css 尝试过很多不同的方法，但似乎无法弄清楚。我假设这必须用某种 javascript 来完成，但我不知道如何实现它。

但是，如果只用 css 就可以完成，那就太好了。

提前致谢。

(不知道你是否需要知道这个，但是子 div 将没有文本。它们只是空白，具有背景颜色和固定高度)

示例代码:

CSS

.box {
margin: 10px;
background: white;
border-radius: 6px;
border: 1px solid darken(white, 12%);
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
-moz-box-shadow:    0px 1px 4px rgba(50, 50, 50, 0.07);
box-shadow:         0px 1px 4px rgba(50, 50, 50, 0.07);
float: left;
}

.line {
height: 6px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
margin-bottom: -1px;
float: left;
}

HTML

...

<div class="box">
<div class="line">&nbsp;</div>
</div>

...

#will be able to add any amount of .lines

Answer 1

使用 display: table(如果你需要等宽的列，使用固定宽度的 table-layout: fixed)容器和 display: table -cell 用于子元素。