css - CSS我如何填充框中的这个空白区域

Question

伙计，对不起，我糟透了

我怎样才能让我所有的盒子避免盒子1的间距，以便盒子4在顶部自动调整

我的小提琴链接 - http://jsfiddle.net/QKbEk/3/

.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 示例

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

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>

Joshua Johnson 发布砌体设计：http ://designshack.net/articles/css/masonry/