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

我试图用HTML制作一个可重新调整大小的水平列表，其中包含一些相当具体的行为。然而，我不确定实施它的最佳方式

我有一个固定宽度项目（div，red）的列表，我想用它填充所有分配的水平空间；均匀地展开以填补空隙。但是，在不能将所有项目都放在水平行中的较窄屏幕上，我希望另一行包含其余项目。这将类似于文字换行，但如果空间允许，项目将均匀地水平分布

---

这似乎有一个简单的解决方案，但这个问题对谷歌来说太复杂了。

我想你会很难解决项目中心偏离线的问题，但对于剩下的问题，你可以这样做：

#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>

---

演示：

这与我正在寻找的行为非常相似。但是，如果有多余的空间，我希望这些物品能均匀分布。另外，在您的示例中，使用与我的图像相同的颜色方案也有好处。不完全如此，我编辑了我的图像，使其更具描述性（请参见#0）.@RectangleTangle如果不将HTML拆分/可能使用jQuery，那么新的第一个图像几乎不可能实现。下面是我尝试使用

内联块

，而不是

浮动

（以便divs中心正确对齐）-它实现了1,2,，3和4:-我同意@mattytommo-图像0可能只能通过Javascript或一些过于复杂的嵌套HTML结构来实现。谢谢Alistair！这已经足够接近了，足够了。