的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）