Question

盖伊，对不起，我觉得这个

如何让我的所有盒子都避开盒子1的间距，以便盒子4在顶部自动调整

.grp {
width: 140px;
margin: 0px auto;
}

.box {
background: red;
margin: 3px;
float: left;
width: 50px;
height: 50px
}

Answer 1

您可以将.box4的规则更改为：

.box4 {
    background: red;
    float: left;
    margin: 3px;
    width: 50px;
    height: 50px;
    position:relative;
    top:-25px;
}

<强> jsFiddle example

这是因为应用于浮动元素的规则。具体而言，“浮动框的外部顶部可能不会高于源文档中较早的元素生成的任何块或浮动框的外部顶部。”但是，通过使用定位，您可以将盒子放在任何需要的位置。

Answer 2

<div class="grp">
   <div style="float:left;width:40%">
      <div class="box" style="height: 80px">box 1</div>
      <div class="box">box 4</div>
   </div>
   <div style="float:left;width:40%">
      <div class="box">box 2</div>
      <div class="box">box 3</div>
      <div class="box">box 5</div>
   </div>
</div>

约书亚约翰逊为砌体设计发帖：http://designshack.net/articles/css/masonry/

CSS如何在框中填充此空白区域

2 个答案: