divコンテナをCSSと垂直に整列する方法は？

Question

私はこの共通の問題に対する一般的かつ完全な解決策を探しています！私はこのようなHTMLコードを持っている：

<div id="CONTAINER"> 
    <div id="CONTAINER_LEFT"></div> 
    <div id="CONTAINER_RIGHT"></div> 
    <div id="CONTAINER_CENTER"></div> 
</div> 

私は彼らのトップエッジがラインしているので、私は垂直方向に内側のdiv要素を揃えることができますCSSを書きたいです。その他の考慮事項：

1. 左右のコンテナの幅は固定されています。
2. センターコンテナは、左と の間の残りの幅を埋める必要があります。
3. 各内側容器の高さは、その内容に応じて であり、容器によって異なります。
4. 重複はありません。目的は次のようなものです image。
5. 可能であれば、外側容器の高さは内側容器の最大高さ に等しくなければなりません!!

色はちょうどアイデアを表示するためのものです！

「float：left;」を使用しました。 「フロート：右」右コンテナと左コンテナのプロパティですが、コンテナのコンテンツが多すぎる場合は、このコンテナの領域が浮動要素の下の領域を埋めます。また、ルートコンテナの下に幅100％のフッターが必要です。どのような解決策もこれを考慮すべきです！

Answer 1

これが最も簡単な解決策のようだとIE7-9、FF、クロム、Safariやオペラの下で動作します：

.container { 
    overflow: hidden; 
    background: grey; 
} 

.left { 
    float: left; 
    width: 200px; 
    background: red; 
} 

.middle { 
    margin-left: 200px; 
    margin-right: 200px; 
    background: green; 
} 

.right { 
    float: right; 
    width: 200px; 
    background: blue; 
} 

Answer 2

（中央）コンテナがその下にある空きスペースを埋めるようにする場合は、おそらくのfaux列のテクニックが必要です。

アイデアは、列の高さを制御しないで、等長の列をシミュレートするために背景イメージを適用することです。

これを実装するために有名なarticle on a list apart on faux columnsにアクセスしてください。非常に簡単です。

Answer 3

これを行うのは十分に簡単です -

http://www.ejeliot.com/blog/61あなたは、大規模な下パディングと等しい負の下マージンを持っているあなたのメインの列を設定する - http://jsfiddle.net/spacebeers/dBvXY/2/は

これは、ここで概説同じ高さのCSS列技術を使用しています。コンテナのオーバーフローを非表示に設定する必要があります。それに応じて数字を調整するが、脳ファンタナは「毎回動く時間の60％」を引用する。

.container { 
    width: 100%; 
    overflow: hidden;  
} 

.left{ 
    float: left; 
    padding: 0px 10px 0px 0px; 
    width: 90px; 
    background: red; 
} 

.middle{ 
    top: 10px; 
    margin-left: 100px; 
    margin-right: 100px; 
    background: green; 
    margin-bottom: -2000px; 
    padding-bottom: 2000px; 
} 

.right{ 
    float: right; 
    background: blue; 
    padding: 0px 10px 0px 10px; 
    width: 90px; 
}​ 

<div class="container"> 
    <div class="left"> 
     Some content for the left column. 
    </div> 
    <div class="right"> 
     Some content for the right column. 
    </div> 
    <div class="middle"> 
     Some content for the middle column. 
    </div> 
</div> 

Answer 4

こんにちは、あなたはこの

CSS

.wraper{ 
    display:table; 
    margin:0 auto; 
    overflow:hidden; 
} 
.left{ 
    display:table-cell; 
    background:red; 
} 

.center{ 
    display:table-cell; 
    margin:0 auto; 
    width:200px; 
    background:green; 
    height:50px; 
} 


.right{ 
    display:table-cell; 
    background:yellow; 
} 

​ 

HTML

などのレイアウト に応じていずれかを定義することができます210

<div class="wraper"> 


    <div class="left">left</div> 
    <div class="center">Center</div> 
    <div class="right">right</div> 

</div> 
    ​ 

ライブデモはここhttp://jsfiddle.net/rohitazad/WeQN2/

Answer 5

。このコード

を試してみてください

HTML

<div id="left"></div> 
<div id="right"></div> 
<div id="center">here you van place your text</div> 

CSS

#left + #right + #center { 
    MARGIN-LEFT: 203px; 
} 
#left + #content { 
    MARGIN-LEFT: 203px; 
} 
#right + #center { 
    MARGIN-RIGHT: 203px 
} 

#left 
{ 
    float:left; 
    width:200px; 
    background:#00CC99; 
    height:300px; 
} 
#right 
{ 
    float: right; 
    width:200px; 
    background:#33FF66; 
    height:400px; 
} 
#center 
{ 
    height:550px; 
    padding:10px; 
    background:#006666; 
    color:#fff; 
}