在布局中将div放在彼此旁边以填充可用空间

Question

根据图片，我可以使用float将div放在彼此旁边但是如何让它们填充自由空间？

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/