2

我正在使用 WP 3.5.1 ATM。我的目标是使文章宽度为 300 像素，然后将它们浮动到左侧，然后这些行以垂直和水平对齐方式直接堆叠在彼此下方。我遇到的问题是，当它到达第二行时，它不会垂直排列在第一行的正下方，而是水平排列。这有时会在第一行和第二行之间留下巨大的垂直间隙，如果第一行中的一篇文章很长，而其他文章很短。

我以前从未尝试过这种布局，所以我想知道是否可以从那些有过的人那里得到一些指示。我怎样才能做到这一点？或者也许是一个教程网站？我用谷歌搜索了它，但没有找到关于该方法的任何内容。

我的目标示例是 mysocialcloud.com、new.myspace.com、so.cl，尤其是这个：http ://www.eleventhemes.com/gridly/

谢谢。

4

2 回答 2

1

如果您乐于使用 CSS3，那么您可以将所有内容包装在一个 div 中，然后使用 CSS 列：

-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;

我做了一个小提琴http://jsfiddle.net/DVfGP。

我创建了一个带有 css 列的 div，然后创建了一个 div 来包含每个元素。我将以下 css 应用于元素：

display: inline-block;
width: 100%;

这将所有元素保留在同一列中。希望这就是你所追求的。

于 2013-03-17T18:43:47.777 回答
1

或者，如果您正在寻找提供更好跨浏览器兼容性的基于 JS 的方法，请尝试使用jQuery Masonry。

按照正常方式浮动您的元素，但 Masonry 将根据可用空间通过绝对定位重新定位您的元素。

于 2013-03-17T19:24:31.460 回答