包裹重新可观的水平列表，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