包裹重新可觀的水平列表，HTML

Question

我試圖在HTML重相當大的水平列表，其中一些相當具體的行爲。但是，我不確定要實施它的最佳方式。

我有一個固定寬度項目（divs，紅色）的列表，我想填充所有分配的水平空間;均勻分散填補空白。然而，在不能適應水平行中所有項目的較窄屏幕上，我想要另一行來形成包含其餘項目的行。這與單詞換行類似，但是如果空間允許，這些項目將水平分佈。

似乎可能有一個簡單的解決方案，但這個問題對Google來說有點太複雜。

Answer 1

我想你會推離了線的項目是中心掙扎，但對於它的其餘部分，你可以做這樣的事情：

#main 
{ 
    width: 100%; 
    background-color: blue; 
    float: left; 
} 

.redDiv { 
    width: 16% 
    background-color: red; 
    height: 150px; 
    margin: 2%; 
    float: left; 

}

鑑於這種HTML結構：

<div id="main"> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
</div> 

DEMO：http://jsfiddle.net/QwQSd/1