具有一列包含底部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; 
}