如何讓多個div以相同的寬度水平排列？

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

您可以在容器中使用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>

Answer 2

這是瑣碎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答案。