具有一列包含底部Div的CSS相同高度列

Question

我非常渴望不使用表格（不是表格可以工作），但我們有一種情況，用戶需要3列div浮動，一個div有兩個div，其中一個這需要顯示在div的底部。

也許我需要重新思考整個過程並說服用戶保持簡單。

反正這裏是我的代碼：

<style> 
    #outer-div { 
     overflow: hidden; 
     background-color: grey; 
    } 
    #column-one { 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     background-color: red; 
     width: 200px; 
     float: left; 
    } 
    #column-two { 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     background-color: green; 
     width: 200px; 
     float: left; 
    } 
    #column-three { 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     background-color: blue; 
     width: 200px; 
     float: left; 
    } 
    #column-one-bottom { 
     position: absolute; 
     bottom: 0; 
     background-color: pink; 
    } 
</style> 
<div id="outer-div"> 
    <div id="column-one"> 
     <div id="column-one-top"> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
     </div> 
     <div id="column-one-bottom"> 
      Column One Bottom Data 
     </div> 
    </div> 
    <div id="column-two"> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
    </div> 
    <div id="column-three"> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
    </div> 
    <br style="clear: both;"/> 
</div> 

見http://jsfiddle.net/Zre8D/2/

希望有人可以提供幫助。

問題出在＃column-one-bottom。我需要這是它的父母的底部，而不是div的中間。

Answer 1

#column-one-bottom { 
    position: absolute; 

嘗試：

#column-one-bottom { 
    position: relative; 

Answer 2

像這樣的事情？ http://jsfiddle.net/Zre8D/

HTML：

<div id="outer-div"> 
    <div id="column-one"> 
     <div id="column-one-top"> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
     </div> 
     <div id="column-one-bottom"> 
      Column One Bottom Data 
     </div> 
    </div> 
    <div id="column-two"> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
    </div> 
    <div id="column-three"> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
    </div> 
    <br style="clear: both;"/> 
</div>​ 

CSS：

#outer-div { 
     overflow: hidden; 
     background-color: grey; 
    } 
    #column-one { 
     background-color: red; 
     width: 200px; 
     float: left; 
     position:relative; 
     padding-bottom:200px; 
    } 
    #column-two { 
     background-color: green; 
     width: 200px; 
     float: left; 
    } 
    #column-three { 
     background-color: blue; 
     width: 200px; 
     float: left; 
    } 
    #column-one-bottom { 
     position: absolute; 
     bottom: 0; 
     background-color: pink; 
     overflow:hidden; 
    }​ 

Answer 3

改變你的風格如下。

<style> 
    #outer-div 
    { 
     height: 100%; 
     background-color: grey; 
    } 
    #column-one 
    { 
     background-color: red; 
     position: absolute; 
     left: 0; 
     width: 200px; 
     height: 100% 
    } 
    #column-two 
    { 
     background-color: green; 
     width: 200px; 
     position: absolute; 
     left: 200; 
     height: 100% 
    } 
    #column-three { 
     background-color: blue; 
     width: 200px; 
     position: absolute; 
     left: 400; 
     height: 100% 
    } 
    #column-one-bottom { 
     position: absolute; 
     bottom: 0; 
     background-color: pink; 
    } 
</style> 

Answer 4

我設法找到解決方案。已接近解決方案（http://jsfiddle.net/Zre8D/12/）：

#outer-div { 
    overflow: hidden; 
    background-color: grey; 
    position: relative; 
} 
#column-one { 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
    background-color: red; 
    width: 200px; 
    float: left; 
} 
#column-two { 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
    background-color: green; 
    width: 200px; 
    float: left; 
} 
#column-three { 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
    background-color: blue; 
    width: 200px; 
    float: left; 
} 
#column-one-bottom { 
    bottom: 0; 
    position: absolute; 
    background-color: pink; 
}