使CSS中的浮动框填充包装器

这让我快发疯了

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

以下是一个例子：

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>

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

所有的框

float:left

和我使用的大小只是“随机”的例子

如何将绿色方框（4）放置在红色方框（2）的正下方，以填补空白

解决方案的要求：

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

PD：我已经尝试了jQuery砌体插件，让他填补JS中的空白，但是运气不好，没有任何选项可以满足我的需要

---

非常感谢您的帮助。

这是可以做到的，但不能使用现有的HTML流

---

可以这样做，但不能使用现有的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 green" style="height:30px;background-color:green"> 4 </div>    
</div>

---

你在找类似的东西吗？唯一的问题是绿色框与其他框重叠

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

---

我也不能这样做，因为我无法知道最终会是哪种布局。因此，对于所有boxeseElements，它应该只有一个容器，按照HTML中的外观顺序浮动。你不想让他们这么做。除非你打算使用JS来计算和定位这些项目，否则你会陷入困境。好吧，我可以定义订单，所以如果有其他订单可以让它工作，那将是一个解决方案！关于使用JS定位元素，这就是我尝试jQuery砌体插件的原因，我认为这将是唯一的方法，但我一直无法使它工作以解决这个特定问题。谢谢你的输入，我也不能这样做，因为我无法知道最终会是哪种布局。因此，对于所有boxeseElements，它应该只有一个容器，按照HTML中的外观顺序浮动。你不想让他们这么做。除非你打算使用JS来计算和定位这些项目，否则你会陷入困境。好吧，我可以定义订单，所以如果有其他订单可以让它工作，那将是一个解决方案！关于使用JS定位元素，这就是我尝试jQuery砌体插件的原因，我认为这将是唯一的方法，但我一直无法使它工作以解决这个特定问题。谢谢你的输入，诸如此类，但正如你所说，问题是框不应该重叠，而且我也不能为一个框定义特定的CSS样式，样式应该是所有框的通用样式，我可以将

绿色

类更改为

。box:type的last

，它将只选择最后一个

框

类元素。这样或那样会有重叠，如果绿框被其他框重叠，问题就会解决。这也不会起作用，因为我不知道布局，下面可能会有更多相同（或不同）大小的框是这样的，但正如你所说，问题是框不应该重叠，而且我也不能为一个框定义一个特定的CSS样式，样式应该是所有框的通用样式，我可以将

绿色

类更改为

。box:last of type

，它将只选择最后一个

框

类元素。这样或那样会有重叠，如果绿框与其他框重叠，问题就会解决。这也不起作用，因为我不知道布局，下面可能有更多相同（或不同）大小的框

<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;}