Wordpress 随机图像之间出现的间隙

我编辑了一个引导Wordpress主题，在首页刷新时随机显示特色图片。但现在，每隔一行图像都显示出巨大的间隙，而不是图像-

我做错了什么，如何消除这些差距？我在index.php中使用了这段代码来随机显示图像-

        <?php /* Start the Loop */ ?>
        *<?php query_posts($query_string . '&orderby=rand') ?>*
        <?php while ( have_posts() ) : the_post(); ?>

**

问题的根源在于图像的高度不尽相同。在您粘贴的屏幕抓图顶部的右侧行中，右侧的图像没有其他两个图像高。因此，浏览器认为它下面有空间放置内容。它在那里添加一个图像，并尝试将其向左浮动。当它碰到什么东西时，它就会停止——上面一行第二列中的图像。然后它停止了。下一张图片就放在下面。这就是CSS中

float

的工作方式

所以你有两个选择。可以将所有图像（或其容器，例如

文章

s）裁剪到相同的高度，或者使用jQuery库（如Mashine）来布局图像

---

有关相关问题和更多讨论，请参阅。

不要在.pbox css中浮动。使用display:inline块代替，您就可以了

---

请参见右下角的屏幕截图和更新的css:

简而言之，间隙来自左侧浮动的图像，这些图像的高度不相等。您有两个选项可以在不编辑当前HTML标记的情况下解决此问题

选项1 添加新的图像大小，将该图像大小添加到wp_查询并重新生成缩略图

3个步骤：

1） 通过向functions.php添加以下内容来创建新的图像大小

add_image_size（'home thumbnail'，400400，true）

主页缩略图
=大小变量，保持简洁

400400
=高度、宽度

true
=硬裁剪，WP将从中心裁剪图像


2） 将新图像大小添加到wp查询中

e、 g.

3） 使用此插件重新生成缩略图：

就这样

选项2
上传前对图像进行预裁剪，使其大小相同。我建议选择1，因为这些步骤是任何开发工作流程的一部分，最终将增加您的开发灵活性/选项。
请注意，砖石结构是cpu的杀手。如果你使用大量的大图片，那么在布局之前，很多用户都会觉得滞后。我制作的图片高度都一样，但我仍然有同样的问题……我在你的网站上没有看到这个问题。你有没有可能缓存了什么？如果它们大小相同，@JosFaber建议的解决方案应该有效-您可以尝试+1。尽管由于图像的高度不同，这仍然会在图像之间留下间隙。您可以在上传过程中让Wordpress呈现特定的图像格式。这样你可以得到所有相同大小的图像。确定后，检查codex的“添加图像大小”；我在很多网站上都做过。只是说照片现在不是这样。如果你想保持不同的尺寸，那么我想剩下的就是砖石了。请注意性能可能会下降。