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

时间:2012-07-18 12:46:41

标签: html css

我迫切希望不使用表格(不是表格会起作用)但我们有这样一种情况:用户想要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的中间。

4 个答案:

答案 0 :(得分:0)

#column-one-bottom {
    position: absolute;

尝试:

#column-one-bottom {
    position: relative;

答案 1 :(得分:0)

这样的东西? 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;
    }​

答案 2 :(得分:0)

改变你的风格如下。

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

答案 3 :(得分:0)

我设法找到了解决方案。接近解决方案(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;
}