如何删除缩略图网格中的空 space

Question

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

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

一些代码：

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 通过对所有元素进行复杂的数学计算来解决这个问题。

如何删除缩略图网格中的空 space

How to remove empty space in thumbnail grid

html

css

grid