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

Question

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

查看我的页面here。

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

当我从 320 像素切换到 480 像素（将 iPhone 从纵向旋转到横向）时，也会发生同样的问题，只是这次图像重叠。

有人知道是什么原因造成的吗？

我对媒体查询、php 和自定义 wordpress 主题比较陌生，所以我可能错过了一些基本的编码元素。

提前非常感谢你:)

Answer 1

jQuery Masonry 插件为了将内容重排到窄窗口，正在向<div class="post">s 添加内联样式。如果不修改该插件（或在特定屏幕宽度以下禁用它），您可以在适当的媒体查询中粗暴地覆盖这些样式。在我看来，这样的事情会奏效：

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

根据this answer，Isotope plugin 可能比 Masonry 更适用于媒体查询的调整大小。