CSS适合水平紧密的n个元素

Question

这个问题有点简单，可能有也可能没有简单的答案：

我有一个div（称为#parentDiv），它的绝对定位宽度为100％。

在#parentDiv中我希望在父div中均匀分布n个div。

换句话说，在＃parentDiv中有一个div（称为#childDiv1），它应该用＃childDiv1的颜色填充屏幕。

有两个div，＃childDiv1和#childDiv2，它应该填满屏幕，左边是第一个颜色，右边是第二个div的颜色。

这里的关键是所有子div的css属性必须是等价的。这样做的原因是我想稍后用jquery添加更多子div，并让它们自动填入父div。

非常感谢任何帮助！

Answer 1

我认为你可以通过父亲的display:table和孩子的display:table-cell来完成你想要的。同时设置table-layout:fixed将使单元格宽度与其内容无关。

标记：

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS：

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