2

こちらのサンプル：http：//jsfiddle.net/YUhgb/

HTML

<html>
    <body>
        <div class="left"></div>
        <div class="right">
            <div class="container">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <p>
                After Container
            </p>
        </div>
    </body>
</html>

CSS

.left{
    float: left;
    width: 150px;
    height: 700px;
    background-color:red;
}
.right{
    margin-left: 160px;
    background-color:blue;
}
.container:after{
    content: "";
    height: 0;
    clear: both;
    display: block;
}
.item{
    float:left;
    width: 21%;
    margin-right: 1%;
    margin-bottom: 10px;
    height: 200px;
    background-color:green;
}

問題は、左側の列が長すぎると、フロートされたコンテンツの下のコンテンツが左側の下にドロップダウンすることです。私の例では、テキストAfter Containerを緑色のボックスのすぐ下に表示したいと思います。

clear：leftを適用して、右の列にのみ影響するようにするにはどうすればよいですか？

4

4 に答える 4

1

この問題は、のクラスを使用してブロックにdisplay: tableとを追加することで解決できます。ここで実際の例を参照してください：http：//jsfiddle.net/skip405/YUhgb/15/width: 100%;container

于 2012-04-24T20:29:23.517 に答える
1

この CSS ブロック全体を削除します。

.container:after{
    content: "";
    height: 0;
    clear: both;
    display: block;
}

...そして追加:

.container { overflow:auto; }

http://jsfiddle.net/YUhgb/12/

乾杯

于 2012-04-24T20:19:36.787 に答える
0

あなたもあなたの右の列を浮かせることができますか？

変更された例：http：//jsfiddle.net/YUhgb/9/

于 2012-04-24T20:18:28.647 に答える
0

float:left;オン.leftをに変更しましたがposition: absolute;、希望どおりに表示されています。

更新されたコード: http://jsfiddle.net/YUhgb/17/

于 2012-04-24T20:43:01.673 に答える