html - CSS 将 n 个元素水平对齐

Question

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

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

在#parentDiv 中我想适应n 个div，在父div 中均匀分布。

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

对于两个 div，#childDiv1 和 #childDiv2，它应该填充屏幕，左侧是第一个 div 的颜色，右侧是第二个 div 的颜色。

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

任何帮助是极大的赞赏！

score 5 · Accepted Answer

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;
}

1 回答 1