html - CSS 等高列，一列包含底部 Div

Question

我非常不想使用表格(不是那个表格可以工作)但是我们有这样一种情况，用户想要 3 列 div float ，一个 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

是这样的吗？ 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;
    }​