Question

我需要将一个未知数量的div（可能是大约5的限制）放入父容器中，并始终确保它们保持平分。我不确定这是否可以单独使用CSS，但我想我最好问一下。因此，如果我们知道使用了3个div：

<style>
  .menu-button { 
    float: left;
    width: 33%;
  }
</style>
<div>
   <div class="menu-button">Button X</div>
   <div class="menu-button">Button Y</div>
   <div class="menu-button">Button Z</div>
</div>

似乎工作，但如果.menu-button div的数量未知，该怎么办？有更好的方法可以自动调整吗？

Answer 1

要对任何元素执行此操作，您有两种解决方案：

使浏览器模拟表格行为
使用Flexible Box布局

例如，使用此HTML代码构建一个宽度相等的每个li元素的水平菜单：

<div id="menu">
  <ul>
    <li><a href="#">First Element</a></li>
    <li><a href="#">Second Element</a></li>
    <li><a href="#">Third Element</a></li>
    ...
    <li><a href="#">N Element</a></li>
  </ul>
</div>

使用表格布局，CSS代码看起来像这样：

#menu{
  width: 100%; /* for instance */
  display: table;
  table-layout: fixed;
}
#menu ul{
  display: table-row;
}
#menu ul li{
  display: table-cell;
}

灵活的盒子布局是一个更现代的解决方案，现在是pretty widely supported：

#menu{
  width: 100%; /* for instance */
}
#menu ul{
  display: flex;
  flex-flow: row;
}
#menu ul li{
  flex-grow: 1;
}

Answer 2

不幸的是，我认为你必须使用表来做到这一点。当<td>调整自身以适应整个宽度时。

HTH

Answer 3

Try this solution（demo page）。

基本上，您需要制作div display:inline-block，并将text-align:justify应用于它们。然后强制换行。一个缺点是div之间总会有一些空间，即没有办法使它们的边缘接触。

调整未知数量的元素以填充父容器的宽度

3 个答案: