Wordpress帖子不会彼此相邻显示

Question

I have been searching for a number of hours now and have tried to figure it out myself however I am having great difficulties resolving it. Basically, I have a wordpress loop in which I have, on my homepage, the post thumbnails displayed. They all appear vertically and I want it so that at least 3 images appear next to each other before starting a new line.

The code for the page is:

<?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;
}

Any help is appreciated. Thanks!

Answer 1

If you want the articles to be placed next to each other, there are several methods how you can achieve this.

The most simple solution would be to assign a class to your articles (just in case you don't want to rely on post_class() or not to affect other articles on the same site), and use the css display property, and set it to inline-block.

article {
    display: inline-block;
}

This way your articles are going to be on the same horizontal line until they reach the end of the screen. The following articles will be placed in the next line, and so on.

Note that the css above does not use a class, and therefor applies to all articles on the page