使用css为子元素分配相等的宽度

Question

我有一个固定宽度的区域，根据具体情况，我需要放置四个div或两个。

如果我有两个div，它应该是这样的：

如果我有四个div，它应该是这样的，

目前我正在放置四个宽度为25%的div。如何使用CSS来设置条件：如果我只有两个div，则将div大小增加到每个50％，以完全覆盖预期区域，就像四个div一样。

修改

有时我不想显示橙色区域或225%区域。在这些情况下，我需要拉伸黄色区域和200%区域。

Answer 1

假设以下示例标记：

<div class="wpr">
    <div></div>
    <div></div>
    <div></div>
</div>

解决方案＃1 - Flexbox

.wpr {
  display: flex;
  width: 400px;
}

.wpr div {
  flex: 1 1 0;
  border: 1px solid yellow;
  background: pink;
  text-align: center;
  min-height: 40px;
}

<div class="wpr">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="wpr">
  <div></div>
  <div></div>
</div>

<div class="wpr">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

解决方案＃2 - 包含table-layout:fixed

的CSS表

.wpr {
    display:table;
    table-layout:fixed;
    width: 400px;
    min-height: 40px;
    
}
.wpr div {
    display:table-cell;
    border: 1px solid yellow;
    background: pink;
}

<div class="wpr">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="wpr">
    <div></div>
    <div></div>
</div>

Answer 2

实现此目的的另一种方法是根据您拥有的盒子数来指定每个盒子的符号。

这可以在CSS 3中完成，并且有点漂亮的想法。

给出以下HTML：

<div class="theContainer">
    <section>One</section>
    <section>Two</section>
</div>

<div class="theContainer">
    <section>One</section>
    <section>Two</section>
    <section>Three</section>
</div>

我们可以使用CSS执行此操作：

.theContainer section:nth-last-child(2),
.theContainer section:nth-last-child(2) ~ section { width: 49%; }

这里我们的选择器说：给我在容器内部的section元素，从结束开始并向后工作到第二个元素（从结尾）。另外，给我这个元素周围的所有部分元素。

如果我们有足够的元素，当我们向后计算集合时，我们将点击一个元素，我们的选择器将匹配。如果我们没有足够的物品，我们的选择器将无法找到该位置。例如，如果我们有3个项目并且我们的选择器要求nth-last-child（4），我们将从集合的末尾向后计数4个项目，这将超过我们所有现有项目并且不选择任何项目。因此，我们的选择器只有在位置x找到一个项目时才会启动，从末尾开始向后工作。

.theContainer section:nth-last-child(3),
.theContainer section:nth-last-child(3) ~ section{ width:  32%; }

这里我们要求从结尾处的第3个部分元素和任何周围的部分元素。

在第一个指令中，我们要求浏览器在我们的div中查找div中最后一个孩子为3或2的所有一般部分兄弟。

如果存在最后一个孩子3，那么我们的32％值将会启动。当存在最后一个孩子2时，我们的50％值将启动。

这是一个显示此解决方案的jsFiddle：http://jsfiddle.net/HreBe/

Answer 3

你可以通过几种方式做到这一点。

• 使用服务器语言计算结果。根据计数周围的开关或条件，将字符串发送到每个div的类，以及结果集。
• 计算父项中的子项数，并在子项之间分配所需的宽度。

我认为后者纯粹是css。越早需要服务器语言。