Question

这让我发疯了。

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

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流程。

Here is an example:

<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

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

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

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

2 个答案: