Css &引用；“链接”；具有显示的不同高度的块：内联块

为了说明我的问题：

我使用的是两列布局，块的高度不同：

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

我希望n°3块正好位于n°1块的下方，在n°2块的左侧（由于n°2块更高，因此没有白色间隙）。这在内联块中是可能的吗？ 如果没有，我应该使用什么，知道结果必须是“响应兼容的”？（我没有在示例中包括媒体查询部分）

谢谢你的帮助

---

Olz

您需要JavaScript根据需要定位div（请参见项目），或者在现有div周围放置一个包含div的div，然后进行一些浮动以获得所需的效果：

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>

布拉布拉

Bla Bla1
布拉布拉

Bla Bla2

Bla Bla2

等等

等等

等等

等等

等等
布拉布拉

Bla Bla3

Bla Bla3
呜呜呜呜呜呜呜呜

Bla Bla4

Bla Bla4

Bla Bla4