随机图像之间出现间隙

Question

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

Here is my site

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

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

Answer 1

问题的根源是图像的高度不同。在屏幕顶部右侧的行中，您已粘贴，右侧的图像不如其他两个图像高。所以浏览器认为它下面有内容空间。它在那里添加了一个图像，并试图将其向左浮动。它碰到某些东西时会停止 - 上面一行第二列中的图像。然后停止。下一张图片放在它下面。这就是float在CSS中的工作方式。

所以你有两个选择。将所有图像（或它们的容器，比如article）裁剪到相同的高度，或者使用像砌体这样的jQuery库来布置图像。

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

Answer 2

不要漂浮在.pbox css中。使用display：inline-block代替，你很好。

请参见右下角的屏幕截图和更新的css：https://www.dropbox.com/s/3qvmhvz5dwlnekb/Screenshot%202014-04-16%2022.14.42.png

Answer 3

简而言之，间隙来自于不等高度的浮动图像。您可以通过编辑当前的HTML标记来解决此问题。

选项1 添加新图像大小，将该图像大小添加到wp_query并重新生成缩略图。

3个步骤：

1）通过在functions.php中添加以下内容来创建新的图像大小 add_image_size( 'home-thumbnail', 400, 400, true);

home-thumbnail =大小变量，保持简单和简短

400, 400 =身高，宽度

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

http://codex.wordpress.org/Function_Reference/add_image_size

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

e.g。 <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'home-thumbnail' ); } ?>

3）使用此插件重新生成缩略图：http://wordpress.org/plugins/regenerate-thumbnails/

就是这样！

选项2 在上传之前预先裁剪图像，使它们的大小相同。我建议使用Opt 1，因为这些步骤是任何开发工作流程的一部分，最终会增加您的开发灵活性/选项。