html - 一个包装可调整大小的水平列表，HTML

Question

我正在尝试在 HTML 中创建一个可调整大小的水平列表，并具有一些相当具体的行为。但是，我不确定实施它的最佳方式。

我有一个固定宽度项目（div，红色）的列表，我想用它来填充所有分配的水平空间；均匀分布以填补空白。但是，在无法将所有项目都放在水平行中的较窄屏幕上，我希望形成另一行来包含其余项目。这将类似于自动换行，但如果空间允许，项目将水平均匀分布。

看起来可能有一个简单的解决方案，但这个问题对谷歌来说有点太复杂了。

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>

演示：http: //jsfiddle.net/QwQSd/1