CSS内联块清理折叠

Question

有没有办法让我的块元素在这个例子中表现得像：

期望效果：

|----|----|
|1111|2222|
|1111|----|
|1111|3333|
|----|----|
|4444|
|----|

实际结果：

|----|----|
|1111|2222|
|1111|----|
|1111|
|----|----|
|3333|4444|
|----|----|

＆＃13;

＆＃13;

.wrapper {
  background-color:red;
  width:220px;
}

.block {
  background-color:blue;
  height:100px;
  width:100px;
  
  display:inline-block;
  vertical-align:top;
  margin:4px;
}

.long {
  height:200px;
}

＆＃13;

<div class="wrapper">
  <div class="block long">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为最好的选择是使用masonry插件。

＆＃13;

＆＃13;

$('.wrapper').masonry({
  columnWidth: 1,
  itemSelector: '.block'
});

＆＃13;

.wrapper {
  background-color:red;
  width:220px;
}

.block {
  background-color:blue;
  height:100px;
  width: 100px;
  display: inline-block;
  margin:4px;
}

.long {
  height:180px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>
<div class="wrapper">
  <div class="block long"></div><div class="block"></div><div class="block"></div><div class="block"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="wrapper">
  <div>
    <div class="block long">

    </div>
    <div class="block">
    </div>
  </div>
  <div>
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</div>

这将使用相同的css

获得所需的效果

Answer 3

您可以添加到.wrapper班级

column-count: 2;
column-gap: 0px;

.wrapper {
  background-color:red;
  width:220px;
  column-count: 2;
  column-gap: 0px;
}

.block {
  background-color:blue;
  height:100px;
  width:100px;
  
  display:inline-block;
  vertical-align:top;
  margin:4px;
}

.long {
  height:200px;
}

<div class="wrapper">
  <div class="block long">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

Answer 4

使用float:left来阻止属性

＆＃13;

＆＃13;

.wrapper {
  background-color:red;
 display: inline-block;
width: 220px;
}

.block {
  background-color:blue;
  height:100px;
  width:100px;
float: left;
  
vertical-align:top;
  margin:4px;
}

.long {
  height:200px;
}

＆＃13;

<div class="wrapper">
  <div class="block long">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;