Question

我正在使用具有不同高度的块的2列布局：

.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

Answer 1

您需要JavaScript来根据需要定位div（请参阅masonry项目），或者在您拥有的div周围包含div，然后浮动以获得所需的效果：< / p>

<强> 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>

不同高度的“链接”块显示：内联块

1 个答案: