灵活的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/