使DIV塊流入空閒空間

我一直在試圖爲我的投資組合網站製作基於塊的界面，其中每個內嵌塊代表我的作品之一，點擊後它會擴大至其尺寸的一倍並顯示更多信息。使DIV塊流入空閒空間

有了這個設置，我開始編寫代碼，但遇到了一個問題：當代碼塊展開時，無論我設置了哪個css設置，它都會在下一行留下空白區域（我試過了打已經），我真正想要的是白色空間與以下項目全部文件。

這是更好下面的圖片上解釋說：

enter image description here 這是實際的HTML：

<div class="block"> 
    1 
</div> 
<div class="block"> 
    2 
</div> 
<div class="block big"> 
    3 
</div> 
<div class="block"> 
    4 
</div> 
<div class="block"> 
    5 
</div> 
<div class="block"> 
    6 
</div> 
<div class="block"> 
    7 
</div> 
<div class="block"> 
    8 
</div>

這是CSS：

.block{ 
    width: 150px; 
    height: 150px; 
    border: 1px solid black; 
    display: inline-block; 
    margin: 5px; 
} 

.big{ 
    width: 320px; 
    height: 320px; 
}

我已經試過玩漂浮值，但這裏沒有運氣。

來源

2013-03-10 arvere

事情是這樣的：http://css-tricks.com/seamless-responsive-photo-grid/？ – sachleen 2013-03-10 19:57:06

我不是專家，但如果您爲此找到純粹的CSS解決方案，我會感到驚訝。那是你在找什麼，或者會幫助javascript好嗎？ – 2013-03-10 20:33:19

@sachleen不，我想要在塊內添加各種內容，而不僅僅是像圖片一樣的圖片 – arvere 2013-03-10 20:41:54