Question

我在主div中有3个div，如下面的HTML / CSS代码所示，当页面呈现时，第二个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完成此操作的方法？想出这个将会很有帮助。

Answer 1

将你的box2向右移动

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

经过测试，可以将第3个框放在第一个

下面

Answer 2

将左侧容器中的第一个和第三个盒子以及右侧容器中的大盒子包裹起来请改为尝试：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>

Answer 3

如果您打算在#splash中包含更多元素，那么您将使用jQuery插件砌体

这是扩展问题的解决方案

http://jsfiddle.net/kxMYS/

$( function() {

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

});

<强>然而

如果您只想要一个解决方案，那就是确切的问题

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

即可

自动定位/对齐具有不同div大小的浮动div

3 个答案:

http://jsfiddle.net/kxMYS/

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