如何刪除縮略圖網格空白處

我試圖創建一個DIV elemtents一個網格，它看起來像這樣的時刻：如何刪除縮略圖網格空白處

enter image description here

「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的解決方案嗎？

來源

2015-02-05 Colin

也許column-count可以幫助你[link]（https://www.google.es/url?sa=t&source=web&rct=j&ei=97HTVMqsJIzYavyUgOAC&url=http://css-tricks.com/almanac/properties/ c/column-count /＆ved = 0CCIQFjAC＆usg = AFQjCNHp65ilNG4LwWEK3yK4WWOU6WB5qQ＆sig2 = oiht-g5u_SaHvPggNjYdaQ） – fcastillo 2015-02-05 18:12:10

@fcastillo我試過了，但它沒有區別..我想因爲我的塊已經是％寬度了。 – Colin 2015-02-05 18:38:51

你可能想看看這篇文章[http://stackoverflow.com/questions/11136286/css-float-empty-spaces][1] [1]：HTTP：//計算器。 com/questions/11136286/css-float-empty-spaces – imnancysun 2015-02-05 18:45:47

你不能這樣做使用純CSS和HTML。 Jquery Mansory通過對所有元素進行復雜的數學評估來解決此問題。

來源

2015-02-05 19:50:24

如何刪除縮略圖網格空白處

回答

相關問題