html - 下一行元素对齐顶部的液体 float

Question

黑色容器有{overflow:hidden;}

黄色 block 的代码顺序与数字相同，并且有 {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}

我添加了一个响应式示例，以便您了解它的 react 。 See fiddle here .这将适用于您的场景，但我相信您会注意到这些限制