网格状文章布局

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

我从来没有尝试过这种布局，所以我想知道如果我可以从那些得到一些指针。我怎样才能做到这一点？或者也许是一个教程网站？我GOOGLE了它，但没有找到任何关于该方法。我的目标

例子是mysocialcloud.com，new.myspace.com，so.cl，而这一次，特别是：http://www.eleventhemes.com/gridly/

感谢。

来源

2013-03-17 Xarcell

也许这应该有帮助... http：//welcome.totheinter.net/columnizer-jquery-plugin/ – PSL 2013-03-17 18:23:59

发布您的代码！和一个JSFiddle：http://jsfiddle.net – user2019515 2013-03-17 18:34:45

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

浮动你的元素按照正常，但砌体将然后重新定位您的元素根据可用空间的绝对定位。

来源

2013-03-17 19:24:31 Terry

我将看看它。谢谢。 – Xarcell 2013-03-17 21:12:44

我尝试这样做，很喜欢这个更好的解决方案。谢谢！ – Xarcell 2013-03-18 01:13:14

如果你乐于使用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。

我创建了一个div与列css然后div来包含每个元素。我将下面的CSS应用于元素：

display: inline-block; 
width: 100%;

这会将所有元素保留在同一列中。希望那是你以后的样子。

来源

2013-03-17 18:43:47 Martyn0627

CSS列是我需要的，并且运作良好。浏览器支持是一个问题，但我并不在乎。 – Xarcell 2013-03-17 19:20:06

我知道这感觉大声笑 – Martyn0627 2013-03-17 19:20:58

虽然我注意到一个奇怪的效果。文章正在被切断（例如，元素内的内容正在被切割并放入下一列）。这是正常的行为吗？ – Xarcell 2013-03-17 19:23:05

网格状文章布局

回答

相关问题