css:浮动块占用所有可用空间

Question

我正在尝试制作一个"图像拼接",主要由相同大小的图像组成,其中一些是双倍高度.

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

为了尽可能简单地自动生成这些马赛克,我认为浮动它们将是最好的选择.不幸的是,大块导致后面的流程在它后面流动,但不是之前:

除了手动定位之外,我还能做些什么 - 将图像送到我想要的地方,还能轻松自动创建同样的布局吗？

---

我目前使用的代码是:

小提琴

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/ ——效果很好！