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

Question

我正在尝试在HTML中制作一个可调整大小的水平列表，其中包含一些相当具体的行为。但是，我不确定实施它的最佳方法。

我有一个固定宽度项目列表（div，红色），我希望用它来填充所有分配的水平空间;均匀地展开以填补空白。但是，在较窄的屏幕上，无法容纳水平行中的所有项目，我想要包含剩余项目的另一行。这与自动换行的行为类似，但如果空间允许，这些项目会在水平方向上均匀展开。

似乎这可能是一个简单的解决方案，但问题对于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