3つのdivの水平方向の均等化

Question

水平方向に均等に配置された3つのボックス（黒、赤、青）を作成したいとします。私の試みでは、それぞれdivをinline-blockに設定し、divsをleft,centerおよびrightに整列させて設定しました。ただし、レンダリングすると、3つのボックスはすべて左に揃えられます。私が実際に望むのは、最初のボックスが外側のdivの左に、3番目のボックスが外側のdivの右側に、そして次に中央のボックスが正確に1番目​​と3番目の真ん中になるようにすることですボックス。

ここに私のコードです：

<div style="width:1000px"> 
 

 
    <div style="display:inline-block; text-align:left; width:200px; height:100px; background-color:black"></div> 
 
    
 
    <div style="display:inline-block; text-align:center; width:200px; height:100px; background-color:red"></div> 
 
    
 
    <div style="display:inline-block; text-align:right; width:200px; height:100px; background-color:blue"></div> 
 

 
    </div>

Answer 1

これを行うにはダースさまざまな方法はおそらくあります。ここでは一つだ：

<div style="width:1000px; text-align:center"> 
 
    <div style="display:inline-block; float:left; width:200px; height:100px; background-color:black"></div> 
 
    <div style="display:inline-block; width:200px; height:100px; background-color:red"></div> 
 
    <div style="display:inline-block; float:right;width:200px; height:100px; background-color:blue"></div> 
 
</div>

フロート最初と最後のdivとテキストが中央のdiv要素を処理するために中央に親に合わせ設定してください。

OKは、ここ（フレキシボックスで）別です：

<div style="width:1000px; display:flex; justify-content: space-between;"> 
 
    <div style="width:200px; height:100px; background-color:black"></div> 
 
    <div style="width:200px; height:100px; background-color:red"></div> 
 
    <div style="width:200px; height:100px; background-color:blue"></div> 
 
</div>

Answer 2

あなたは33％の幅のために行く、その後、100％の幅コンテナ内左にdiv要素のそれぞれをフロートすることができますそれぞれの。

#cointainer { 
 
    width: 100%; 
 
    color: white; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
#left { 
 
    width: 33%; 
 
    float: left; 
 
    background-color: black; 
 
} 
 
#center { 
 
    width: 33%; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
#right { 
 
    width: 33%; 
 
    float: left; 
 
    background-color: blue; 
 
}

<div id="cointainer"> 
 
    <div id="left">blah blah blah</div> 
 
    <div id="center">blah blah blah</div> 
 
    <div id="right">blah blah blah</div> 
 
</div>

Answer 3

あなたが使用できるフレキシボックス：それはする必要がありますので

<div style="width:1000px; display: flex; justify-content: space-between"> 
    <div style="width:200px; height:100px; background-color:black"></div> 
    <div style="width:200px; height:100px; background-color:red"></div>  
    <div style="width:200px; height:100px; background-color:blue"> 

Complete tutorial here