如何使div容器與CSS垂直對齊？

Question

我正在尋找一個普遍而完整的解決方案來解決這個常見問題！ 我有這樣的HTML代碼：

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

我想編寫CSS，使我可以垂直對齊內部div元素，以便它們的頂部邊緣對齊。 其他注意事項：

1. 左右容器的寬度固定。
2. 中心容器必須填充左右容器之間的剩余寬度。
3. 每個內部容器的高度取決於其內容物，因此在各個容器之間會有所不同。
4. 沒有重疊的意圖，目的是類似於下圖。
5. 如果可能，外部容器的高度應等於內部容器的最大高度！

顏色僅用於顯示想法！

我用“ float：left;” 和“浮動：正確；” 左右容器的屬性，但如果居中容器的內容過多，則該容器的區域將填充浮動元素下方的空間！ 另外，我需要在根容器下方有一個寬度為100％的頁腳； 任何解決方案都應考慮這一點！

Answer 1

這很容易做到-http://jsfiddle.net/spacebeers/dBvXY/2/

它使用此處概述的等高CSS列技術-http: //www.ejeliot.com/blog/61

您將主列設置為具有較大的底部填充和相等的負底邊距。 您的容器需要將溢出設置為隱藏。 相應地調整數字，但引用Brain Fantana的話“每次工作的時間有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 2

如果您打算讓（中心）容器填充其下方的可用空間，則可能正在尋找仿列技術 。

這個想法是，您不要嘗試控制列的高度，而應應用背景圖像來模擬等長的列。

轉到偽造的列表上的著名文章，並進一步閱讀以實現這一點，這很容易。

Answer 3

嗨，您可以根據自己的布局定義任何這樣的內容

的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

<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 4

這似乎是最簡單的解決方案，並且可以在IE7-9，FF，Chrome，Safari和Opera中運行：

.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 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;
}