複数のdivを同じ幅で水平に配置するにはどうすればよいですか？

Question

2つ、3つまたはそれ以上のdivが水平に配置されたい場合は、各幅がすべての利用可能なスペースを埋めるようにします。たとえば、2つのdivの場合は、それぞれスペースの半分を占め、3つのdivの場合はスペースの1/3を占めます。

ディスプレイのインラインブロックを使ってみましたが、divを並べて並べることはできますが、どのようにして親コンテナの幅を埋めることができますか？

EDIT：好ましくは、ディスプレイなしのフレックス方法（完全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>

私がしたのは、とbuttonにそれぞれdisplay:flexとflex:1のプロパティを追加したことでした。

Flexbox is very widely supported nowadaysですが、IE（バージョン11まで）や古いAndroidを気にしている場合は、避けたいかもしれません。残念なことに、フレックスボックスなし、あなたがしたいことははるかに困難です。私は誰かにフレックスボックス以外の回答を書くようにします。