php - Wordpress 帖子不会彼此相邻显示

Question

我已经搜索了几个小时，并试图自己弄清楚，但我很难解决它。基本上，我有一个 wordpress 循环，在我的主页上，我在其中显示了帖子缩略图。它们都垂直显示，我希望在开始新行之前至少有 3 张图像彼此相邻显示。

页面的代码是:

<?php 
get_header();?>

<div id="primary">
<div id="content" role="main">
    <?php
    $mypost = array('post_type' => 'photo_posts');
    $loop = new WP_Query($mypost);
    ?>
    <?php while ($loop->have_posts()):$loop->the_post();?>
        <article id="post-<?php the_ID();?>" <?php post_class(); ?>>
            <header class="entry-header">
                <!-- Display featured image -->
                <div>
                    <a href="<?php echo $permalink = get_post_permalink();?>"><?php the_post_thumbnail(array(230, 230)); ?></a>
                </div>
            </header>
            <div class="entry-content"><?php the_content(); ?></div>
        </article>
<?php endwhile; ?>
</div>
</div>

<?php get_footer(); ?>

CSS:

.container {
   position: absolute;
   padding-right: 20px;
   width: 70%;
   right: 0;
}

感谢任何帮助。谢谢!

Answer 1

如果你想让文章并排放置，有几种方法可以实现。

最简单的解决方案是为您的文章分配一个类(以防万一您不想依赖 post_class() 或不影响同一站点上的其他文章)，并使用 css display 属性，并将其设置为 inline-block。

article {
    display: inline-block;
}

这样一来，您的文章将位于同一水平线上，直到到达屏幕末尾。后面的文章会放在下一行，以此类推。

请注意，上面的 css 没有使用类，因此适用于页面上的所有文章