靈活的div位置水平和垂直無間隙

Question

我想根據他們的容器的寬度水平和垂直動態位置div具有相同的寬度和不同的高度。

DEMO HERE

我想堆疊起來像

| 1 | 2 |

| 3 | 4 |

| 5 |

問題是divs之間有白色的差距。 即使我想補充左側

DEMO HERE

我仍然獲得差距明確1和第5。

是否有可能通過CSS來實現？

EDIT: 

容器寬度可能會改變（即如果用戶拖動其邊框）。然後div裏面應該正確對齊佔據整個空間。可能的結果如下：

| 1 |

| 2 |

| 3 |

| 4 |

| 5 |

或

| 1 | 2 | 3 |

| 4 | 5 |

或

| 1 | 2 | 3 | 4 |

| 5 |

或

| 1 | 2 | 3 | 4 | 5 |

Answer 1

如果您只想使用CSS，我認爲最適合您的是設置兩列。在第一列中，您將放置1,3和5，並在第二列2和4中。這樣就不會有任何空格。

編輯： 如果你想堆這些div沒有空格，仍然有一個靈活的佈局，你不能這樣做只是在CSS，但你可以用 Isotope一個jQuery插件，是很容易使用的嘗試。

Answer 2

試試這個：我做了一個班級專欄，並在其中有內容的列。可能不是你所需要的，但它會工作...

http://jsfiddle.net/Te7Z6/41/