wordpress响应式布局中的额外“空间”

Question

我最近下载了Gridly wordpress主题（响应），并使用css媒体查询来调整不同宽度的布局--1020px，610px，480px，320px。

请参阅我的页面here。

当我将窗口从1020px最小化到610px和610px到480px时，网格平滑地重新排列。当我从480px切换到320px时出现“问题”，因为在弹出的特色图像缩略图下面似乎有一个额外的空间，导致一个帖子图像与下一个图像之间存在很大差距。当我从横向视图旋转到纵向视图时，在笔记本电脑上的浏览器和我的iPhone上都会出现这种情况。

当我从320px切换到480px（将iPhone从纵向旋转到横向）时，只有这次图像重叠时才会出现同样的问题。

有没有人知道造成这种情况的原因是什么？

我对媒体查询，php和定制wordpress主题一般都很陌生，所以我可能错过了一些基本的编码元素。

非常感谢您提前：）

Answer 1

jQuery Masonry插件，在将内容重排到瘦窗口的过程中，正在为<div class="post">添加内联样式。如果没有修改该插件（或在某个屏幕宽度以下禁用它），您可以在相应的媒体查询中轻率覆盖这些样式。在我看来，像这样的东西会起到作用：

#post-area .post {
    float: left;
    top: auto ! important;
    display: block;
    position: relative ! important;
}

根据this answer，Isotope plugin可能比Masonry更适合媒体查询的尺寸。