Question

我希望你能解决我正在努力解决的CSS问题。

我有一组div，让我们说这个例子为4。我想在页面上的两个垂直列中构建它们，不使用在每个列周围使用容器div。

然而（这里是棘手的部分），我希望它们的排列方式使每个div都低于它上面的那个。目前，我已经得到它，以便它们在顶部相互对齐。

Take a look here for the code & example

它正常，除非左边的一个div比右边的div长，如示例所示。

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

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

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

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

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

Answer 1

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

使用CSS3 Columns

#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;
}

View example on CSSDesk

使用jQuery插件

正如@allaire所说，Masonry在一个优秀的图书馆中。
然后有Wookmark，没有测试过，但看起来很干净。
或者这个模仿CSS3列行为的jQuery.column插件。（还没试过这个）

还有更多插件可以进行整理，搜索masonry alternatives以找到你的选择。

Answer 2

我曾经做过类似的事情并得出结论使用jQuery，这是我使用的插件，效果很好：

http://masonry.desandro.com/

Answer 3

这是一种纯粹的html / css方法。

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  position: relative;
}
div.box {
  float: left;
  width: 50%;
}
div.box:nth-child(odd) {
  margin-right: 1px;
}
div.box:nth-child(even) {
  margin-left: -1px;
}

框上的左边距和边距右边确保左框不会浮动到左框旁边。

将多个div放在两列中，而不包含容器div / wrappers

3 个答案:

使用CSS3 Columns

使用jQuery插件