使用CSS的动态行div（框）？

Question

我有一个可变数量的盒子，我想尽可能多地显示而不强迫观察者水平滚动，它们之间也应该有一定的空间。这意味着如果调整浏览器大小，则框必须移动到下一个或上一个“行”。

如何使用div和CSS实现此目的？

提前致谢： - ）

P.S：享受我的艺术技巧：

Answer 1

您需要做的就是将红色divs宽度和/或高度设置为“百分比”并设置小黑色div float: left。

示例：

<div style="width: 80%"><div style="margin: 5px 0px 5px 10px; float: left;"></div> </div>

一旦观众调整窗口大小，这将让你的红色div重新调整大小。＆gt;

Answer 2

Scaryguy的答案非常正确。但外部div 应该有overflow: hidden，以便竞争者正常工作。

请参阅此示例：http://jsfiddle.net/QCf4U/

示例中的代码包含float: left的所有红色框。并且有4个蓝色div包含（前2个蓝色div在顶部粘在一起）：

1. 没有清晰且没有浮动，并且里面有3个红色div。
2. 没有清晰且没有浮动，并且里面有3个红色div。
3. 有clear: left，还有5个红色div
4. 有overflow: hidden，还有5个红色div

请注意，如果容器上没有clear或float也没有overflow: hidden，容器1和2上的红色div将彼此相邻（不跟随容器）。

您可以看到容器蓝色div要获得正确的垂直尺寸，您必须使用overflow: hidden（或者也可能float）。