jquery - Place divs beside each other in a layout to fill free space

Question

According to the picture I can place divs beside each other using float but how can I make them fill the free space?

Answer 1

您需要为每个 div 使用容器，例如：

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container">
    <div class="box" id="big"></div>
    <div class="box"></div>
</div>

演示：http: //jsfiddle.net/Jt3Az/3/

Answer 2

您为每一列制作一个容器，然后将它们全部浮动。

（我添加了一类small和big用于大小差异。）

<div id="a">
    <div class="box small">
    </div>
    <div class="box big">
    </div>
    <div class="box small">
    </div>
    <div class="box big">
    </div>
</div>
<div id="b">
    <div class="box big">
    </div>
    <div class="box small">
    </div>
    <div class="box big">
    </div>
    <div class="box small">
    </div>
</div>
<div id="c">
    <div class="box small">
    </div>
    <div class="box big">
    </div>
    <div class="box small">
    </div>
    <div class="box big">
    </div>
</div>

这背后的CSS：

#a,#b,#c {
    width:50px;
    height:auto;
    float:left;
    margin:10px;
}

.box {
    float:left;
    width:50px;
    margin:5px;
    background-color:#ccc;
}

在这里检查它：http: //jsfiddle.net/pvKhQ/