的CSS的div以无间隙

Question

在这个例子中，我有3个div的叠加，突出了一个紫色的边界：

他们有一个450像素宽度，并且左浮动。如果它们的高度完全相同，底部的第三个框线很好，但它们的高度是可变的，我希望它们从左到右，从上到下没有任何间隙地流动。

这可能吗？

Answer 1

不是没有绝对定位。要么让它们全都一样高，要么只用Javascript来定位它们。

Answer 2

它可能可能通过使用CSS3 column选项，但是这些都不是很好的支持，它可能不会是一个好主意。

要么设置一个固定的高度，要么将它们分成浮动div的列。

否则，您将需要一个相当复杂的js设置。

Answer 3

是的，您必须将div放在左边，并将div放在单个容器中。左边的所有元素都会在另一个浮动的div中，而右边的所有div都会在另一个也浮动的div中。

例如：

http://jsfiddle.net/3XVwB/

Answer 4

，你可以做一个2列布局，一切都将显示为你想要的 - http://jsfiddle.net/zhvFK/

Answer 5

尝试使右上元素float: right，是这样的：

<div style="width: 350px;"> 
    <div style="float:left; width: 200px; height: 100px; background-color:Purple;"></div> 
    <div style="float:right; width: 150px; height: 240px; background-color:Green;"></div> 
    <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div> 
</div> 

（here's a jsfiddle for it）