Question

我迫切希望不使用表格（不是表格会起作用）但我们有这样一种情况：用户想要3个div 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;
}

CSS相同的高度列，其中一列包含底部Div

4 个答案: