css: float block 占据所有可用空间

Question

我正在尝试制作一个“图像马赛克”，它主要由相同大小的图像组成，其中一些是双倍高度。

它们都应该像这样整齐地对齐:

为了尽可能容易地自动生成这些马赛克，我认为 float 它们是最好的选择。不幸的是，大块导致以下那些在它后面流动，但不是在它之前:

除了手动定位它们之外，我还能做些什么来将图像放到我想要的位置，并且仍然可以轻松地自动创建类似的布局？

---

我目前使用的代码是:

FIDDLE

HTML:

<div class="frame">
    <div id="p11" class="img">1.1</div>
    <div id="p12" class="img h2">1.2</div>
    <div id="p13" class="img">1.3</div>
    <div id="p21" class="img">2.1</div>
    <div id="p22" class="img">2.2</div>
</div>

CSS:

.frame {
    background-color: blue;
    border: 5px solid black;
    width: 670px;
}
.img {
    width: 200px;
    height: 125px;
    background-color: white;
    border: 1px solid black;
    float: left;
    margin: 10px;
}
.h2 {
    height: 272px;
}

Answer 1

你需要使用 Javascript 来实现这个效果，我不得不这样做一次，我使用了 http://masonry.desandro.com/ -- 效果很好!