Question

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

我尝试使用display inline-block，并且可以让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 is very widely supported nowadays，但如果你关心IE（包括版本11）或更老的Android，你可能想要避免它。不幸的是，没有 flexbox，你想做的事情要困难得多。我会让其他人写一个非flexbox的答案。

Answer 2

您可以在容器中使用display: table，在按钮上使用display: table-cell。

.container{
  border: solid 1px green;
  height: 50px;
  box-sizing: border-box;
display: table;
width: 100%;

}
.button{
  display: table-cell;
  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>

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

2 个答案: