Question

所以，我没有足够的声誉点来上传图片，所以我会尽力解释它。

在网格视图中（就像pinterest一样），每个帖子都有不同的高度。即使高度不同，所有柱子也会填补它们之间的间隙（即它们之间没有间隙）。

对于我的网站，我已经为4个帖子水平设置了以下CSS：

.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/。希望它有所帮助。

网格视图：未正确对齐

1 个答案: