-1

以下の HTML /CSS コードでマークアップされているように、メイン div 内に 3 つの div があります。ページがレンダリングされると、2 番目の div は最初と最後の 2 倍の大きさになります。ページがレンダリングされると、2 番目の div は最初と最後の div の 2 倍のサイズであるため、最後の div が 2 番目の div の下に表示され、その間にギャップが残ります。私が望むのは、3 番目の div が次のギャップを占めることです。

<html>
<head>
<title>Liquid Divs</title>
<style>

#splash {
    width: 600px;
    margin: 1px;
    border: solid 1px #ccc;
}

.box {
    width: 196px;
    height: 196px;
    margin: 1px;
    border: solid 1px #ccc;
    float: left;
}

.box2 {
    width: 392px;
    height: 392px;
    margin: 1px;
    border: solid 1px #ccc;
    float: left;
}

.clear-fix {
    clear: both;
}

</style>

</head>

<body>

    <div id="splash">

        <div class="box">
        </div>

        <div class="box2">
        </div>

        <div class="box">
        </div>

        <div class="clear-fix">
        </div>

    </div>

</body>
</html>

これは CSS で行うことができますか、または JavaScript でこれを達成する方法を知っている人はいますか? これを理解するのに役立ちます。

4

3 に答える 3

1

box2を右にフロートするように切り替えます

.box2 {
    width: 392px;
    height: 392px;
    margin: 1px;
    border: solid 1px #ccc;
    float: right;
}

テスト済みで、3番目のボックスを最初のボックスの下に配置して動作します

于 2013-01-22T19:18:13.590 に答える
0

より多くの要素を含める予定がある#splash場合は、jQuery プラグインの石積みの後です

これは拡張機能の問題に対する解決策のデモです

http://jsfiddle.net/kxMYS/

$( function() {

    $('#splash').masonry({
        itemSelector: 'div'
    });

});

でも

与えられた問題を正確に解決したいだけなら

CSSを.box2に変更するだけですfloat:left;

http://jsfiddle.net/kxMYS/1/

于 2013-01-22T19:24:27.813 に答える
0

1 番目と 3 番目のボックスを左のコンテナーにラップし、大きなボックスを右のコンテナーにラップする 代わりにこれを試してください: http://jsfiddle.net/wcQ3L/1/

<html>
<head>
<title>Liquid Divs</title>

<style>
#splash {
    width: 600px;
    margin: 1px;
    border: solid 1px #ccc;
}

#left-container{
    float: left;
}
.box {
    width: 196px;
    height: 196px;
    margin: 1px;
    border: solid 1px #ccc;    
}

.box2 {
    width: 392px;
    height: 392px;
    margin: 1px;
    border: solid 1px #ccc;
    float: left;
}

.clear-fix {
    clear: both;
}
</style>
</head>

<body>

    <div id="splash">

        <div id="left-container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        </div>

        <div id="right-container">
        <div class="box2">
        </div>
        </div>


        <div class="clear-fix">
        </div>

    </div>

</body>
</html>
于 2013-01-22T19:21:39.337 に答える