HTML网格系统，其中具有不同高度的元素将自动占用可用空间

Question

我们如何防止多余空间，例如A和D之间。 http://jsfiddle.net/samarthwiz/4KCSx/

<div>A</div>
<div style="height: 170px">LONGER</div>
<div>C</div>
<div>D</div>
<div style="height: 100px">SHORTER</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>

Answer 1

我不认为单独使用CSS是可行的。但是，有几种工具使用JavaScript来动态组织块以优化空间使用。我最熟悉的是砌体：http://masonry.desandro.com/

Answer 2

您可以这样做，请参阅以下链接  www.jsfiddle.net/4KCSx/1 /