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 { {1}}属性，并将其设置为display。

inline-block

通过这种方式，您的文章将在同一水平线上，直到它们到达屏幕的末尾。以下文章将放在下一行，依此类推。

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

Wordpress帖子不会彼此相邻显示

1 个答案: