1

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

在这里查看我的页面。

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

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

有谁知道可能是什么原因造成的？

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

非常感谢您提前:)

4

1 回答 1

0

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

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

根据这个答案，对于媒体查询的调整大小， Isotope 插件可能比 Masonry 工作得更好。

于 2012-09-19T18:26:23.180 回答