在可变高度的网格中使用浮动

Question

我有以下网格，每个红色块都是div。正如您所看到的，最长的div正在向下推动两个divs，从而产生不必要的空间。

以下是我希望拥有它的方式，因此空间更紧凑，不会被最长的div打破：

对此有解决方案，还是Mason / Isotope的替代方案？

Answer 1

使用花车无法实现您想要的效果。但是你可以使用：

div{
position:absolute;
} 

这将达到你想要的效果，因为它可以让你将每个盒子准确定位在你想要的位置，直到像素。请注意，这将从文档流中删除每个div。出于这个原因和其他一些原因，我建议将div限制在某种设置为的容器中：

position: relative;

这将限制绝对定位的范围。