css - 灵活的 div 水平和垂直定位，没有间隙

Question

我想动态地水平和垂直定位 div，宽度相同，高度不同，具体取决于容器的宽度。

DEMO HERE

我想把它们叠起来

| 1 | 2 |

| 3 | 4 |

| 5 |

问题是 div 之间存在空白。 即使我在左侧添加清晰的第 1 和第 5

DEMO HERE

我仍然有差距。

是否可以用 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 插件。