css - "Chaining"不同高度的 block ，带显示 :inline-block

Question

为了说明我的问题:http://jsfiddle.net/89bnF/762/

我使用的是 2 列布局， block 具有不同的高度:

.thumbBlock {
     display: inline-block;
     background-color: #efbf53;
     width: 45%;
     padding: 10px;
     margin: 5px;
     vertical-align: top;
     border: 1px solid #aaa;
 }

我希望 n°3 block 位于 n°1 block 的正下方，n°2 block 的左侧(由于 block n°2 较高而没有白色间隙)。这可以通过内联 block 实现吗？ 如果不是，我应该使用什么，知道结果必须是“响应兼容”？ (我没有在示例中包含媒体查询部分)

感谢您的帮助!

奥尔兹

Answer 1

您需要 JavaScript 来根据需要定位 div(请参阅 masonry 元素)，或者在您拥有的 div 周围放置一个包含 div，然后进行一些 float 以获得所需的效果:

<强> jsFiddle example

CSS

.l {
    float:left;
    clear:left;
}
.r {
    float:right;
    clear:right;
}

HTML

<div id="container">
    <div class="thumbBlock l">Bla Bla1
        <br />Bla Bla1</div>
    <div class="thumbBlock r">Bla Bla2
        <br />Bla Bla2
        <br />Bla Bla2
        <br />Bla Bla
        <br />Bla Bla
        <br />Bla Bla
        <br />Bla Bla
        <br />Bla Bla</div>
    <div class="thumbBlock l">Bla Bla3
        <br />Bla Bla3
        <br />Bla Bla3</div>
    <div class="thumbBlock r">Bla Bla4 Bla Bla4
        <br />Bla Bla4
        <br />Bla Bla4
        <br />Bla Bla4</div>
</div>