不同的高度div在两列中浮动 [英] different height divs float in two columns
问题描述
我有两个列，并且希望按照出现的顺序堆叠不同高度的div。
I have two columns and want to stack divs of different heights in order of appearance.
这些div是动态创建的。
The divs are dynamically created.
如果我只漂浮他们在50％的宽度，很快我来到情况下，div＃4是传入的几个div的5倍。然后下一个div和上一个div的底部对齐。
If i only float them on 50% of width, soon I come in situation that div #4 is 5 times higher than incoming few divs. Then next div is top aligned with bottom of previous div.
我需要在容器中匹配子div，以便完全匹配：
I need to fit child divs in container to be exact match like this:
----- -------
1 2
-----
3 -------
----- 4
5
-----
6
-----
7 -------
----- 8
9
-----
10 -------
11
-------
-------
-----
这是代码片段我做了什么：
Here is code snippet what I have done:
<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
欣赏帮助
推荐答案
这与JavaScript。如果您使用jQuery，有一个非常好的插件叫做 Masonry 。还有非jQuery版本。
You're going to have to do this with JavaScript. If you're using jQuery, there is an excellent plugin called Masonry. There is also the non jQuery version.
要引用< a href =https://github.com/desandro/masonry> README on GitHub ：
Masonry是动态网格布局脚本。想想它是CSS浮动的翻转
。而浮动垂直排列元素水平然后
，Masonry垂直排列元素，将每个
元素定位在网格中的下一个开放点。结果最小化
在不同高度的元素之间的垂直间隙，就像mason
在墙上拟合石头一样。
Masonry is a dynamic grid layout script. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
单列布局可能是您要查找的内容。
The single column layout is probably what you're looking for.
如果你不介意把旧的浏览器放在灰尘中，可以使用 CSS3 列属性。有一个示例，这里，Quirksmode 和一些关于 MDN 。
If you don't mind leaving older browsers in the dust, there are the CSS3 column properties. There's an example here, on Quirksmode, and some documentation on the MDN.
这篇关于不同的高度div在两列中浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
