Question

我想根据容器的宽度水平和垂直地动态定位div具有相同的宽度和不同的高度。

我想像

那样堆叠它们

| 1 | 2 |

| 3 | 4 |

| 5 |

问题是div之间存在白色差距。即使我在左边添加第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

试试这个：我创建了一个类列，并且列中包含了内容。可能不是你需要的，但它会起作用......