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

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 |

score 1 · Accepted Answer

如果您只想使用 CSS，我认为最适合您的是设置两列。在第一列中，您将输入 1、3 和 5，在第二列中输入 2 和 4。这样就不会出现任何空格。

编辑： 如果你想堆叠那些没有空格的 div 并且仍然有一个灵活的布局，你不能只在 CSS 中做到这一点，但你可以尝试使用Isotope一个非常易于使用的 jQuery 插件。

score 1 · Accepted Answer

试试这个：我做了一个类列，并在其中包含内容的列。可能不是你需要的，但它会工作......

2 回答 2