CSS内联块清洁折叠

是否有一种方法可以使我的块元素的行为与此示例中的类似：

---

预期效果：

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

实际结果：

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

.wrapper{
背景色：红色；
宽度：220px；
}
.街区{
背景颜色：蓝色；
高度：100px；
宽度：100px；
显示：内联块；
垂直对齐：顶部；
保证金：4倍；
}
.朗{
高度：200px；
}

---

这将对您可以添加到

.wrapper

类中的相同css产生所需的效果

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

.wrapper{
背景色：红色；
宽度：220px；
列数：2；
柱间距：0px；
}
.街区{
背景颜色：蓝色；
高度：100px；
宽度：100px；
显示：内联块；
垂直对齐：顶部；
保证金：4倍；
}
.朗{
高度：200px；
}

---

使用

float:left

阻止属性

.wrapper{
背景色：红色；
显示：内联块；
宽度：220px；
}
.街区{
背景颜色：蓝色；
高度：100px；
宽度：100px；
浮动：左；
垂直对齐：顶部；
保证金：4倍；
}
.朗{
高度：200px；
}

---

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

$（'.wrapper'）。砌体({
列宽：1，
itemSelector:“.block”
});
.wrapper{
背景色：红色；
宽度：220px；
}
.街区{
背景颜色：蓝色；
高度：100px；
宽度：100px；
显示：内联块；
保证金：4倍；
}
.朗{
高度：180像素；
}

恐怕这不会改变什么。加载plunker并运行它。在我的示例中，您将看到元素正确对齐，但如果有更多元素，则左侧将出现空白，而不是右侧；）这是一个砖石结构布局，“干净的折叠”在这里意味着什么？@Paulie_D不完全正确，我希望数字4占据示例中5的空间。是的……CSS不能这样做。这就是为什么会有JS。@BSMP我的意思是折叠时不留空格，除非在列表的末尾。这个例子非常好，但不幸的是，它在实际项目中破坏了我的整个布局。我现在正在进行调试；）这不会按要求订购DIV。
column-count: 2;
column-gap: 0px;