将多个 div 放置在两列中，无需容器 div / 包装器

Question

我希望你能帮我解决我正在尝试解决的 CSS 问题。

我有一组 div，在本例中假设为 4 个。我想将它们组织在页面上的两个垂直列中，而不需要在每列周围使用容器 div。

然而（这是棘手的部分），我希望对它们进行排列，以便每个 div 正好位于其上方的 div 之下。目前，我已经做到了，以便它们沿着顶部彼此对齐。

看看这里的代码和示例。

它工作正常，除非左侧的 div 比右侧的 div 长，

所以...我的问题是。我如何获得它，以便绿色框位于蓝色框的正下方，而不是与黄色框的顶部内联。

我不想使用margin-top: -60px或类似的。

如果需要的话，使用 JavaScript/jQuery 是可以的，但是纯 CSS 解决方案将是理想的选择。

要记住的重要一点是我不能在列周围使用容器 div。

我什至不确定这是否可能，并且浪费了一天的时间试图让它发挥作用...如果您能提供帮助，我将非常感激 - 即使您只是确认这是不可能的！

Answer 1

有 2 种解决方案，CSS3且不支持旧版浏览器，或jQuery 插件。

使用CSS3 列

#wrapper{
    column-count: 2;
    column-gap: 10px;
}

或者为了获得更好的兼容性，使用供应商前缀：

#wrapper{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

在 CSSDesk 上查看示例

使用 jQuery 插件

1. 正如 @allaire 指出的，Masonry是一个优秀的图书馆。

2. 然后是Wookmark，还没有测试过，但看起来很干净。

3. 或者这个模仿 CSS3 列行为的jQuery.column插件。（还没有尝试过这个）

还有更多的插件可以进行列化，搜索砖石替代品来找到您的选择。