在 CSS 中制作浮动框填充包装器

Question

这让我发疯。

我正在构建一个页面，该页面仅具有预定义的页眉和页脚，它们之间的内容将是一组必须正确放置才能填充包装器的框（动态）。

这是一个示例： http://jsfiddle.net/rdMKQ/1/

HTML：

<div id="wrapper" >
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:80px;height:60px;background-color:yellow"> 3 </div>
    <div class="box" style="width:40px;height:30px;background-color:green"> 4 </div>
</div>

非内联 CSS：

#wrapper{width:180px;}
.box{float:left}

所有的框 float:left 和我使用的大小只是“随机”作为示例，

我可以做什么来定位绿色框 (4) 位于红色框下方(2) 填补空白？

解决方案的要求：

• 我不能为单个盒子定义特定的样式，样式应该是所有盒子通用的
• 盒子不能重叠

PD：我已经尝试过 jQuery Masonry Plugin 让他做填补 JS 空白的工作，但不幸的是，没有任何选项可以满足我的需要。

非常感谢您的帮助。

Answer 1

这是可以完成的，但不能使用现有的 HTML 流程。

这是一个示例：

<div id="wrapper" >    
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:40px;height:30px;background-color:green"> 4 </div>
</div>
<div class="box" style="width:80px;height:60px;background-color:yellow;"> 3 </div>

并且

#wrapper{width:100px;height:60px;float:left;}
.box{float:left}

Answer 2

您是否正在寻找类似这个的内容？唯一的问题是绿色框与其他框重叠。

<div id="wrapper" >
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:80px;height:60px;background-color:yellow"> 3 </div>
    <div class="box green" style="height:30px;background-color:green"> 4 </div>    
</div>

和

#wrapper{width:180px;}
.box{float:left; z-index:5;}
.green{position:relative; clear:both; width:100%; margin-top:-30px; z-index:3;}