让 div 元素在页面上“浮动”答案

【问题标题】：let div elements 'float' on page让 div 元素在页面上“浮动”
【发布时间】：2016-03-30 10:42:30
【问题描述】：

我有一个页面（由 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 最适合，但它仍然不会产生“拼图”效果。

提前致谢。

【问题讨论】：

【解决方案1】：

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

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

除了我想象不同大小的 div 之外，您仍然会在它们之间获得空白。

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

【讨论】：