0

我很想不使用表格（不是表格可以工作），但我们有这样一种情况，用户希望 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 的中间。

4

4 回答 4

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>
于 2012-07-18T13:06:32.580 回答
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;
    }​
于 2012-07-18T12:54:09.403 回答
0 
#column-one-bottom {
    position: absolute;

尝试：

#column-one-bottom {
    position: relative;
于 2012-07-18T12:52:09.833 回答
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;
}
于 2012-07-18T15:27:02.850 回答