ラッパーの3つのボックスの水平方向の整列

Question

ちょっと、 私はCSS3で遊んでいて、3つのdivボックスを使って問題に遭遇しました。 正確なマージンを指定しなくても、それらをラッパーボックスで水平に整列させたいと思っています。 3つのボックスになり

.box1 { 
background: gray; 
float: left; 
width: 250px; 
padding: 3px; 
margin: 0 auto; 
} 

.box2 { 
background: gray; 
float: left; 
width: 250px; 
padding: 3px; 
margin: 0 auto; 
} 

.box3 { 
background: gray; 
float: left; 
width: 250px; 
padding: 3px; 
margin: 0 auto; 
} 

、それらの間のマージン無しラッパーボックスに左整列：

私のアプローチは、このされています。しかし、ボックスに余白を設定すると、ボックスは赤いラッパーに中央揃えされます。正確なピクセル設定なしでこれを行うためのアイデアですか？

Answer 1

Hmm。 float値にはmargin-autoは使用できません。 私はそれらに正確なピクセルマージンを与えます。より多くの制御。

あなたは赤いラッパーの幅を知りたくありませんか？

また、これらのクラスはすべて同じです。「ボックス」と呼んで、すべてのボックスで再利用してください。

.box{ 
    background: gray; 
    float: left; 
    width: 250px; 
    padding: 3px; 
    margin: 3px; 
} 

<div id="red-wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

EDIT： （。これを考えていたと思った私は、あなたが探している結果を与えるかもしれない別の構造を共有したい。）

.bigbox{ 
    width:33%; 
    float:left; 
} 

.box { 
    background: gray; 
    width: 200px; 
    padding: 3px; 
    margin: 3px auto; 
} 

#red-wrapper { 
    width:100%; 
    background:red; 
    overflow:hidden; 
} 

<div id="red-wrapper"> 
    <div class="bigbox"> 
    <div class="box"> </div> 
    </div> 
    <div class="bigbox"> 
    <div class="box"></div> 
    </div> 
    <div class="bigbox"> 
    <div class="box"></div> 
    </div> 
</div> 

jsFiddle

Answer 2

の場合インラインブロックがあなたの目的に適しています。 Fiddle。

Answer 3

私はこの問題があり、私はフレックスボックスを使用しました。 https://www.w3schools.com/css/css3_flexbox.asp ズームするときに要素に合わせてラップすることができます。