固定宽度 div 内 div 元素的动态宽度

Question

我正在处理一个在多个页面中使用的固定宽度的父 div。这个 div 里面有很多（3-5）个子 div 元素。对于不同的页面，子 div 元素的数量是不同的，即第 1 页，父 div 有 3 个子 div，第 2 页，父 div 有 5 个子 div 等等。

如何设置这些子元素的宽度，使它们在每个页面中完全占据父 div 的宽度？

附：约束是不使用 SASS/Less 和 Bootstrap。

Answer 1

基本上，您要求一个表格，其中每个单元格的宽度应与父单元的固定宽度成比例相同。

如果您知道最大可能的子节点数，则在 CSS 中是可能的（如果不知道，您将始终使用所有空间，但每个单元格的宽度会根据内容而变化）

当您知道孩子的最大数量时，将该属性添加到类.height：max-width:Npx 其中N 是父母的width 除以孩子的数量

.container {
    border:1px solid #000;
    border-radius:5px;
    width:500px;
    display:table;
}
.child{
    display:table-cell;
    border-right:1px solid #000;
}

.child:last-of-type {
    border:none;
}
.height{
    min-height:100px;
}

<div class="container height">
    <div class="child height">Child 1</div>
    <div class="child height">Child 2</div>
    <div class="child height">Child 3</div>
    <div class="child height">Child 4</div>
    <div class="child height">Child 5</div>
</div>

Answer 2

你可能想试试flex

.parent {
  width: 100%;
  background-color: blue;
  display: flex;
}

.child {
  height: 20px;
  background-color: red;
  margin: 10px;
  display: flex;
  width: 100%;
}

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