液体浮子，其中下一行元素对齐顶部

Question

黑色容器有{overflow:hidden;}

黄色块的代码与数字的顺序相同，并且{float:left;}

这就是我希望第5个元素发生的事情：

但这就是现在正在发生的事情：

我该怎样做才能使那些不符合要素的元素与其上方的元素对齐？

这里是interactive example。

我想避免绝对定位，因为元素是动态创建的。可能有两倍的元素。

Answer 1

我强烈建议您使用Masonry来做这类事情，但与此同时，我们将如何解决这个问题：

.container {overflow:hidden; background-color:#000; width: 360px; text-align: center;}
.block {float:left; height:50px; width:70px; background-color:yellow; margin:10px;}
.high {height:150px; float:right}

.container2 {overflow:hidden; background-color:#000; width: 98%; height:80vh; text-align: center;}
.container2 .block {float:left; height:20%; width:23%; background-color:yellow; margin:1%;}
.container2 .high {height:40%; float:right}

我添加了一个响应示例，以便您可以看到它的反应。 See fiddle here。这将适用于您的方案，但我确定您会注意到这些限制