让页面上的 div 个元素 'float'

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 最适合，但它仍然没有产生 'puzzle' 效果。

提前致谢。

Answer 1

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

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

除非我想象 div 的大小不同，它们之间仍然会有空白。

对于空白最少的真正平铺布局，您可能需要考虑 MASONRY。

let div elements 'float' on page