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

Question

我尝试使用div elemtents创建一个网格，目前看起来像这样：

＆＃34; 2＆＃34;是故意的，但当我把它做得更大时，它的左侧有空的空间，其他较小的块不会去那里。我的问题是：如何获得＆＃34; 5＆＃34;去那个空旷的空间，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通过对所有元素的复杂数学评估来解决这个问题。