3つの子divをレイアウトする正しい方法は、左側に1つ、中央に1つ、親の右側に1つあります。

Question

私はアイデアはボックスが親のdivであり、それが任意の幅とすることができ、これらの3人の子供があろうとされて

--------------------------------------------------------- 
|              | 
| child div 1   child div 2   child div 3| 
|              | 
--------------------------------------------------------- 

CSSで、次のように私のdivの表示を持っているエレガントな方法を把握することはできません常に左に1、中央に2、右に3が並んでいます。

ボーナスポイントの場合、親のdivの中心に垂直に並べ替えることができますが、それは幻想的ですが、私はそれがなければ得ることができます。

TIA。親DIVと一覧表示に

Answer 1

子divの幅を設定するには、親divと使用率の幅を設定する必要があります。または、子divに固定幅を指定し、親divをその周囲に展開する必要があります。ここであなたが始めることができるいくつかのコードです：

HTML：決算</div>以降<div>が接触しているか

<div class="block"> 
    <div class="sidebar"> 

    </div><div class="main"> 

    </div><div class="sidebar"> 

    </div> 
</div> 

注意してください。インラインブロック要素とインラインブロック要素が接触するためには、マークアップ内にそれらの間にスペースを入れることはできません。

CSS：

.block { 
    border: 1px solid; 
    display: inline-block; } 
.block .sidebar { 
    background: red; 
    width: 100px; 
    height: 40px; 
    vertical-align: middle; 
    display: inline-block; } 
.block .main { 
    background: blue; 
    width: 400px; 
    height: 100px; 
    vertical-align: middle; 
    display: inline-block; } 
.block div { margin: 0; } 
.block p { margin: 0; } 

あなたは.block固定幅にすることを決定した場合、display: inline-blockを削除します。

.blockが固定幅を持っていないときは、次にのみ適用：

あなたが水平方向中央.blockに必要がある場合.blockはそれがラップさせるために必要とされるインライン要素であるため、あなたmargin: 0 autoは動作しません。固定幅要素の周りに配置します。親要素（が最も外側の要素の場合はbody要素）にtext-align: centerを追加し、次にtext-align: leftを.blockに追加する必要があります。

プレビュー：私は浮動オプションを理解していないhttp://jsfiddle.net/Wexcode/jfQqF/

Answer 2

表行

list-display: table-row; 

：表セル。子供たちに。 次に、子div3の右側にテキストを整列させます。利点は、幅を指定する必要がないことです。フロート：

は

float: left; 

はdivタグと使用すべての3人の子供に幅を設定フローティングのまま。あなたは、親で4番目のdivとなるかもしれません。それらのフロートを適切にクリアする。