使用 CSS 创建等宽 div答案

【问题标题】：Create equal-width div's with CSS使用 CSS 创建等宽 div
【发布时间】：2011-09-18 17:39:16
【问题描述】：

我有一个具有一定宽度的 div，我想在这个 parent div 中放置一个或多个“子”div。我希望它们彼此相邻放置（所以我使用float:left 或display:inline-block）并且我希望它们都具有相同的宽度。我非常希望他们用一定的最大宽度填充父 div（所以如果我有 4 个 div，它们每个应该是 25% 的宽度，如果是 5 个 20% 的宽度等）。这里的关键是，无论 div 的数量如何，它都应该工作 - 可能是 1，可能是 5，可能是 15。

我已经尝试在下面的 jsFiddle 中执行此操作，但我无法弄清楚如何在没有任何 JavaScript 的情况下使其工作。 jsFiddle

我想我的问题是 div 通常会扩展到我希望它们扩展以适应父级的内容的宽度？我可以在所有子 div 上尝试 width:100%，但似乎这与 float:left 或 display:inline-block 配合得不太好。

【问题讨论】：

div的数量会变吗？还是父div的宽度是动态的？
是的，div 的数量会发生变化。 parent 的宽度是固定的。
div 的数量将如何变化？ javascript会添加和删除它们，还是在页面生成时生成（并随后固定数量）？
两者。创建页面时，我可能有 3 个或 5 个或 10 个 div。然后稍后可能会使用 JavaScript 添加更多内容。但我会选择一个适用于任意数量的 div 的解决方案（因此使用 JavaScript 添加更多内容并不是世界末日）
为此您需要在页面上显示的实际内容是什么？

标签： css layout

【解决方案1】：

最好的选择是 display:flex 用于父 div 并在子 div 中使用 flex-basis:100%

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.flex-item {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  background: tomato;
  padding: 5px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

【讨论】：

【解决方案2】：

也许使用display: table; 会有所帮助？ http://jsfiddle.net/g4dGz/119/

【讨论】：

【解决方案3】：

也许将其设为table，并将所有元素作为td 添加到一个tr 中。如果你想要here 是一个 jQuery 解决方案

编辑

这是我能想到的使用纯CSS的唯一方法，不知道有没有其他方法

还要检查这个已经存在的问题Distribute elements evenly using CSS in SO

【讨论】：

同意，表格非常适合这种行为。使用 javascript 添加额外的 <td> 元素也不会破坏解决方案。

【解决方案4】：

我只是要解决这个问题 - 你可能最好使用 gasp TABLES（哦不，他说了什么！aaaaaaah！）

http://jsfiddle.net/taw57/

编辑：我的小提琴显示了您损坏的 div 版本，其中包含两个具有不同列数的表格版本。

【讨论】：

是的，这似乎是要走的路。我将把这个问题留一会儿，看看是否有人提出了一个非表格的答案。

【解决方案5】：

听起来这很容易通过使用桌子来实现（尽管在这些无桌子时代，这是一个脏话）。不知道这些元素的用途我不知道这在语义上是否正确。

您也可以尝试使用 display:table-cell 等。但这与旧浏览器的兼容性较差...

【讨论】：

【解决方案6】：

怎么样：http://jsfiddle.net/TnCCd/

边框增加宽度，溢出：隐藏位将清除浮动，因此容器不会折叠

【讨论】：

但是，如果我只有 3 个 div，它们根本不会填充父级？ jsfiddle.net/TnCCd
这个是固定宽度，但是需要id动态宽度