5

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

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

但是（这是棘手的部分），我希望它们被排列，以便每个 div 正好低于它上面的那个。目前，我已经做到了，这样它们就可以在顶部相互对齐了。

在这里查看代码和示例。

除非左侧的 div 之一比右侧的 div 长，否则它可以正常工作，如示例中所示。

所以......我的问题是。我如何获得它以使绿色框直接位于蓝色框下方，而不是与黄色框的顶部对齐。

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

如有必要，使用 JavaScript/jQuery 很好，但纯 CSS 解决方案将是理想的。

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

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

4

3 回答 3

3

有 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插件。（还没有尝试过这个）

还有更多的插件可以进行分栏，搜索砌体替代品以找到您的选择。

于 2012-10-22T21:01:11.143 回答
0

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

http://masonry.desandro.com/

于 2012-10-22T20:32:54.543 回答
0

这是一种纯粹的 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;
}

框上的 margin-left 和 margin-right 确保左框不能浮动在左框旁边。

于 2016-12-06T15:47:44.717 回答