让div元素'浮动'在页面上

Question

我有一个页面（由php生成），里面填充了div元素。所有div都有随机边距，随机大小和随机颜色。其中有30个。

我希望这些div能够自己填充页面，因此可能存在最少的空白，这样它们就形成了一种谜题。

这是我的HTML：

<div class="board"><!--30 divs with random styles and class="card--></div>

和CSS：

div.card {
    float: left;
}
div.board {
   display: ;
}

我需要在显示属性中填写什么？我尝试了很多，run-in最适合，但它仍然没有产生“拼图”效果。

提前致谢。

Answer 1

使用纯HTML和CSS，您可以尝试制作所有div：

div {
    display: inline-block;
    margin: 0;
}

除非我想象div的大小不一，你仍然会在它们之间得到空白。

对于具有最小空格的真正平铺布局，您可能需要考虑MASONRY。