如何让多个div以相等的宽度水平排列？

Question

我想要两个、三个或更多的 div 水平排列，那么每个宽度都会填充所有可用空间。例如，对于两个 div，它们将各自占据一半的空间，对于三个 div，它们将占据 1/3 的空间，依此类推。

我尝试使用显示内联块，并且可以让 div 并排排列，但是如何让它们填充父容器的可用宽度？

编辑：最好没有显示弯曲方法（我不确定它是否与 IE11 完全兼容）

.container{
  border: solid 1px green;
  height: 50px;
  box-sizing: border-box;


}
.button{
  display:inline-block;
  border: solid 1px black;
  height: 20px;
}

<div class="container">
<div class="button ">
div1
</div>
<div class="button ">
div2
</div>
<div class="button ">
div3
</div>
</div>

Answer 1

这对于Flexbox布局来说很简单：

.container{
  border: solid 1px green;
  height: 50px;
  box-sizing: border-box;
  display: flex;
}
.button{
  display:inline-block;
  border: solid 1px black;
  height: 20px;
  flex: 1;
}

<div class="container">
<div class="button ">
div1
</div>
<div class="button ">
div2
</div>
<div class="button ">
div3
</div>
</div>

我所做的只是分别将display:flex和flex:1属性添加到container和button。

Flexbox 如今得到了广泛的支持，但如果您关心 IE（直至并包括版本 11）或更旧的 Android，您可能希望避免使用它。不幸的是，如果没有Flexbox，你想做的事情就会困难得多。我会让其他人写一个非弹性盒的答案。