如何删除缩略图网格中的空白区域

Question

我正在尝试使用 div 元素创建一个网格，目前它看起来像这样：

“2”是故意变大的，但是当我把它变大时，它的左侧有空白空间，其他较小的块不会去那里。我的问题是：我如何让“5”去那个空白空间和 6 到 5、7 到 6 等。我如何摆脱那个空白空间？

一些代码：

CSS：

.block
    position: relative
    float: left
    display: inline

HTML：

<div class='grid'>
        <div class='block block-1'><span>1</span></div>
        <div class='block block-2'><span>2</span></div>
        <div class='block block-1'><span>3</span></div>
        <div class='block block-1'><span>4</span></div>
        ....
</div>

我需要 javascript 来执行此操作还是有 HTML/CSS 解决方案？

Answer 1

你不能使用纯 CSS 和 html 来做到这一点。 Jquery Mansory 通过对所有元素进行复杂的数学评估来解决这个问题。