Question

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

我试过在下面的jsFiddle中这样做，但我无法弄清楚如何在没有任何JavaScript的情况下使其工作。 jsFiddle

我想我的问题是div通常会扩展到其内容的宽度，我希望它们扩展到适合父级？我可以在所有子div上尝试宽度：100％，但看起来这似乎不适合使用float：left或display：inline-block。

Answer 1

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

修改

这是我能想到使用纯CSS的唯一方法，不确定是否有其他方式

另请在SO
中查看已存在的问题Distribute elements evenly using CSS

Answer 2

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

Answer 3

父div的最佳选项为display:flex，子div中使用flex-basis:100%

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

边框添加到宽度，溢出：隐藏位将清除浮动，因此容器不会崩溃

Answer 5

听起来这是最容易通过使用表格来实现的（虽然这是这些无表格时代的一个咒骂）。不知道元素的用途我不知道这是否在语义上正确。

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

Answer 6

我只是想通过这个 - 你可能最好用喘气 TABLES（哦，不，他说的是什么！aaaaaa！）

http://jsfiddle.net/taw57/

编辑：我的小提示显示你的破坏的div版本，其中两个表版本具有不同的列数。

用CSS创建等宽div

6 个答案: