1

这真让我抓狂。

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

这是一个例子：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 空白的工作，但没有运气，没有任何选项可以满足我的需要。

非常感谢您的帮助。

4

2 回答 2

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}
于 2011-08-05T16:16:56.673 回答
0

你在寻找这样的东西 吗？唯一的问题是绿色框与其他框重叠。

<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;}
于 2011-08-05T16:23:50.967 回答