0

私はテーブルを使用しないように必死です（テーブルが機能するわけではありません）が、ユーザーが3つの列のdivをフローティングにし、1つのdivに2つのdivがあり、そのうちの1つを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 
#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 に答える
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 に答える