dzo*_*ona 10 html css html5 css3
我有两列,并希望按照外观顺序堆叠不同高度的div.
div是动态创建的.
如果我只将它们漂浮在宽度的50%上,很快我会遇到div#4比传入的几个div高5倍的情况.然后下一个div与前一个div的底部对齐.
我需要在容器中使用div div来完全匹配,如下所示:
----- -------
1 2
-----
3 -------
----- 4
5
-----
6
-----
7 -------
----- 8
9
-----
10 -------
11
-------
-------
-----
以下是我所做的代码片段:
<style>
.box {background:#20abff; color:#fff; width:50%; margin: 5px;}
.left {float:left;}
.right {float:right;}
.container {width:205px;}
</style>
<body>
<div class="container">
<div class="box left" style="height:60px;">1</div>
<div class="box left" style="height:80px;">2</div>
<div class="box left" style="height:30px;">3</div>
<div class="box left" style="height:70px;">4</div>
<div class="box left" style="height:60px;">5</div>
<div class="box left" style="height:20px;">6</div>
<div class="box left" style="height:40px;">7</div>
<div class="box left" style="height:90px;">8</div>
<div class="box left" style="height:30px;">9</div>
</div>
</body>
它看起来与此类似
http://dl.dropbox.com/u/142343/divstack.html
感谢帮助
Boj*_*les 12
你将不得不用JavaScript做到这一点.如果你正在使用jQuery,那么有一个很棒的插件叫做Masonry.还有非jQuery版本.
Masonry是一个动态网格布局脚本.把它想象成CSS浮动的另一面.浮动水平然后垂直排列元素,而砌体垂直排列元素,将每个元素定位在网格中的下一个开放点.结果最大限度地减少了不同高度的元素之间的垂直间隙,就像墙上的石头装饰石头一样.
该单列布局可能是你在找什么.
如果您不介意将旧浏览器放在尘埃中,那么就有CSS3 column属性.这里有一个例子,在Quirksmode上,以及MDN上的一些文档.