HTML5/CSS迴流網格佈局

Question

我一直在尋找一種方法來做到這一點，我還沒有遇到任何東西。我所追求的是能夠在網格佈局中顯示一系列圖片，從左到右，然後上下排列。我希望它佔用每一行上可用的空間（同時遵守某些條件（如圖像之間的填充）），當窗口重新調整大小時，它會自動重新計算圖像應放置的位置。

我總結了以下的圖形，以幫助援助什麼，我想要知道的：

有沒有簡單的方法在CSS中做到這一點，HTML5和/或JavaScript？

謝謝， 喬希。

Answer 1

「易」 的方式：

img { 
    float: left; 
} 

這裏有一個的jsfiddle。 http://jsfiddle.net/Sp3pU/

Answer 2

使用百分比。嘗試是這樣的：

#outer{ 
    height:400px; width:400px; 
} 
#outer img{ 
    width:30%; border:0; margin:2%; float:left; 
} 
#outer #bd{ 
    clear:left; 
} 

你的HTML可能包括：

<div id='outer'> 
    <img src='whatever1.png' alt='whatever1' /> 
    <img src='whatever2.png' alt='whatever2' /> 
    <img src='whatever3.png' alt='whatever3' /> 
    <img src='whatever4.png' alt='whatever4' /> 
    <img src='whatever5.png' alt='whatever5' /> 
    <img src='whatever6.png' alt='whatever6' /> 
    <img src='whatever7.png' alt='whatever7' /> 
    <img src='whatever8.png' alt='whatever8' /> 
    <img src='whatever9.png' alt='whatever9' /> 
    <img src='whatever10.png' alt='whatever10' /> 
    <img src='whatever11.png' alt='whatever11' /> 
    <img src='whatever12.png' alt='whatever12' /> 
    <div id='bd'></div> 
</div> 

調整利潤是必要的。這是2％的折扣，因爲3％30​​％將佔用90％，然後做到保證金重疊應該是4％的利潤率爲2％，因此8％爲98％。您可能希望使用20％的寬度和4％的邊距，4和100％。