网格视图：未正确对齐

Question

因此，我没有足够的信誉点来上传图片，因此我会尽我所能解释它。

在网格视图（就像pinterest），每个职位有不同的高度。即使身高不同，所有职位都填补了他们之间的空白（即他们之间没有差距）。

我的网站，我已经建立了下面的CSS 4个帖子水平：

.sample{ 
float:left; 
width: 24%; 
margin-right:1%; 
} 

他们排队正常水平，但是，因为他们有所有不同的高度，他们没有正确对齐垂直（即很多差距）。

我不知道如何更改代码，以便不管网格视图中帖子的高度如何，它们总是垂直和水平排列。

谢谢。

编辑：

从桌面，请到http://sevek.staging.wpengine.com/mobile/?wptouch_preview_theme=enabled然后就调整窗口的大小，使它看起来像一个移动版本。

这（主页）是我试图复制的工作版本。

当您调整屏幕宽度时，所有项目都很好地对齐并且没有间隙。现在

，请到这里（这是我试图修复），然后调整宽度840px：

http://sevek.staging.wpengine.com/profile/sevek/?wptouch_preview_theme=enabled

正如你所看到的，网格视图职位不正确，有对齐是差距。

Answer 1

我试着在你的代码上做它，但是它需要大量的清理，因为你有很多值覆盖！重要的，用另一个重要的等等覆盖。我建议从零开始至少为贵“的用户的帖子”类，然后它的第一级子，

.userpro-posts { 
    width: 100%; 
    max-width: 700px; 
    margin: 2em auto; 
    -moz-column-count:3; 
    -moz-column-gap: 3%; 
    -moz-column-width: 30%; 
    -webkit-column-count:3; 
    -webkit-column-gap: 3%; 
    -webkit-column-width: 30%; 
    column-count: 3; 
    column-gap: 3%; 
    column-width: 30%; 
} 

.userpro-post { 
    margin-bottom: 20px; 
} 

（你可以设置你想要的栏目，但你可能需要一些JS以及用于不同的屏幕尺寸）

删除所有不需要的代码，并按照这个小提琴http://jsfiddle.net/jalbertbowdenii/7Chkz/。希望能帮助到你。