Javascript 追加div块并自动更改行

我想不出一个好方法来构造这段html/css

假设我有一个中心+中间80%高度+宽度的区域，这意味着它会随浏览器调整大小

现在，我有一个div标签列表，这些标签由javascript动态附加到这个区域。当div标记到达行的末尾时，它将更改为下一行

像这样：

___________________________
| [AB] [CD] [EF] [GH] [IJ] |
| [KL] [MN] [OP] [QR] [ST] |
| [UV] [WX] [YZ]           |
|__________________________|

---

我有100个这个div块，当浏览器改变大小时，它们可能会一起移动和改变线条。请建议一种使用html/css实现此布局的有效方法。感谢您的帮助。

您可以使div浮动在容器内，容器可以绝对定位/固定在指定的尺寸上：

document.querySelector（'.container'）.addEventListener（'click'，function（）{
this.insertAdjacentHTML（'beforeend'，'Block'+（this.children.length+1）+''；
});
.container{
位置：绝对位置；
宽度：80%；
身高：80%；
左：10%；
排名前10%；
背景：#EEE；
溢出：自动；
}
.集装箱{
高度：50px；
宽度：100px；
背景：珊瑚；
浮动：左；
}
.container.block:n子（奇数）{background:darkseagreen；}

第一区
第2区
第3区
第4区
第5区
看看这个javascript库，它可能会帮助您找到所需的内容achive@Vinod，非常非常好的插件：我没有得到这些消极的人谁贡献了什么，但投票关闭后。问题简单明了，Vinod和Dfsq给出的答案非常棒，他们都用两种不同的方法来回答。你太棒了。非常干净的解决方案，完全解决了我的问题。很高兴它帮助了您：）