3

正しいfloatdivを常に互いに「スタックアップ」させることは可能ですか？

たとえば、私は次のようなことをしようとしています。

> ---------------------------------+
> |Container div           |   div1|
> |Fixed width             +--+----+ 
> |                           |div2|
> |                      +----+----+
> |                      |     div3|
> |                      +---------+
> |                                |
> +--------------------------------+

Div1、2、および3は、可変の幅と高さです。正しくフロートさせただけでは、必ずしもそのように積み重なるとは限りません。レイアウトがコンテナの高さを最小化しようとするため、div2がdiv1の左側に配置されることもあります。いつも下に積み上げてほしいです。

4

2 に答える 2

21

これらのcssルールは、それらを右揃えでスタックする必要があります

.div1, .div2, .div3{
    float: right;
    clear: right;
}

フィドルの例を参照してください。

スクリーンショット ここに画像の説明を入力してください

ソース

.div1, .div2, .div3{
    float:right;
    clear:right;
}
.div2{
    background-color:green;
    width: 300px;
    height: 20px;
}
.div1{
    background-color:blue;
    width: 100px;
    height: 30px;
}
.div3{
    background-color:red;
    width: 80px;
    height: 40px;
}

.container{
    background-color: gray;
    width: 400px;
    height: 400px;
}
于 2012-12-05T21:41:54.820 に答える
0

、、のDIV周りにdiv1ラッパーを配置し、、、を設定している間div2、div3ラッパーをフロートさせます。div1div2div3display: blockfloat: none

于 2012-12-05T21:41:26.787 に答える