-1

我在下面的 HTML / CSS 代码中标记的主 div 中有 3 个 div，当页面呈现时，第二个 div 是第一个和最后一个 div 的两倍。当页面呈现时，因为第二个 div 的大小是第一个和最后一个 div 的两倍，这导致最后一个 div 显示在第二个下方，中间留有间隙。我想要的是第三个 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;
}

经过测试，它可以将第三个盒子放在第一个盒子下面

于 2013-01-22T19:18:13.590 回答
0

将第一个和第三个盒子包装在左容器中，将大盒子包装在右容器中试试这个：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 回答
0

如果您打算在#splashjQuery 插件砌体之后包含更多元素

这是扩展问题的解决方案演示

http://jsfiddle.net/kxMYS/

$( function() {

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

});

然而

如果您只想要一个解决方案来解决您确切的问题

只需将您的CSS更改.box2为float:left;

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

于 2013-01-22T19:24:27.813 回答