html - 如何让多个 div 等宽水平排列？

Question

我想要两个、三个或更多的 div 水平排列，然后每个宽度将填满所有可用空间。例如，两个 div 各占一半空间，三个 div 占 1/3 空间，依此类推。

我尝试使用 display inline-block，并且可以让 div 并排排列，但是如何让它们填充父容器的可用宽度？

编辑:最好不要使用 display flex 方法(我不确定它是否与 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 is very widely supported nowadays ，但如果您关心 IE(最高版本 11)或更旧的 Android，您可能希望避免使用它。不幸的是，没有 flexbox，你想做的事情要困难得多。我会让别人写一个非 flexbox 的答案。