2

フローティング div に問題があります。答えを探すとき、ほとんどの質問は、私が望むものを達成する方法ではなく、私が得ている効果を達成する方法でした. 基本的に、私は div をフローティングして 3 つの列を作成しています。望ましい結果は、最初の div のすぐ下の列 1 にある必要がある 4 番目の div であり、3 番目のフローティング div が高さで終わるところから始まります。最初の div、終了します。以下の最新のクロムのコードは、私が望まないことを示しています。

私が得ている効果は、私が期待するようなものです clear: left; 4 番目のフローティング div に適用された場合の動作。

以下のコードは、3 * 400px が画面の幅よりも小さく、4 * 400 が画面の幅よりも大きい解像度でのみ機能します。

この画像は何が起こっているかを示しています。4 番目の div が必要な場所ではなく、矢印で示されています: http://img687.imageshack.us/img687/2613/desired.png

<html>
    <head>
        <style>
        .div1
        {
            float: left;
            background-color: black;
            height: 100px;
            width: 400px;
        }
        .div2
        {
            background-color: red;
            height: 200px;
            width: 400px;
            float: left;
        }
        .div3
        {
            float: left;
            background-color: blue;
            height: 500px;
            width: 400px;
        }
        .div4
        {
            background-color: green;
            float: left;
            height: 100px;
            width: 400px;
        }
    </style>
</head>
<body>

    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>

</body>
</html>
4

2 に答える 2

2

W3から:

フローティング ボックスの外側の上部は、ソース ドキュメントの前の要素によって生成されたブロックまたはフローティング ボックスの外側の上部よりも高くすることはできません。

jQuery masonry pluginに興味があるかもしれません。

于 2012-05-17T20:51:53.210 に答える
0

HTML を少し変更できる場合は、div1 と div4 をグループ化できます。

<html>
    <head>
        <style>
        .group1 {
            float: left;
        }
        .div1
        {
            float: left;
            background-color: black;
            height: 100px;
            width: 400px;
        }
        .div2
        {
            background-color: red;
            height: 200px;
            width: 400px;
            float: left;
        }
        .div3
        {
            float: left;
            background-color: blue;
            height: 500px;
            width: 400px;
        }
        .div4
        {
            clear: both;
            background-color: green;
            height: 100px;
            width: 400px;
        }
    </style>
</head>
<body>

    <div class="group1">
        <div class="div1"></div>
        <div class="div4"></div>
    </div>
    <div class="div2"></div>
    <div class="div3"></div>


</body>
</html>​​​
于 2012-05-17T21:47:31.380 に答える