最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

css - the_post layout

programmeradmin3浏览0评论

I'm getting stucked with the layout of the_post function.

I would love to have two post thumbnails per row and above the thumbnails the description, title, category of the post.

If I use flex property it shows to me all of those above in row.

any help?

Here is the code updated: HTML / PHP

<?php
        // the query
        $the_query = new WP_Query(array(
            'category_name' => 'first_4',
            'post_status' => 'publish',
            'posts_per_page' => 4,
        ));
?>

<div class='article-container'>
            <?php if ($the_query->have_posts()) : ?>
                <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
    <div class='article-row'>
        <div class='article-column'>
                        <?php the_post_thumbnail(); ?>  
        </div>
                       <div class='article-info'>
                           <span><?php the_category(); ?></span> 
                           <span> <?php the_title(); ?></span> 
                           <span> <?php the_excerpt(); ?></span> 
                           <span> <?php the_content(); ?></span> 
                        </div> 
    </div>
                    <?php endwhile; ?>
                    <?php wp_reset_postdata(); ?>

                <?php else : ?> 
                    <p><?php __('No News'); ?></p>
                <?php endif; ?>
</div>

<?php

and HERE the CSS

.article-container {
display: flex; 
flex-flow: row wrap;
justify-content: space-between;
margin: auto;
}

.article-container .article-row {
    box-sizing: border-box;
    width: 48%;
}

.article-row .article-column img{
    width: 100%; 
    height: auto;

It seems to work but any advice will be appreciated! Of course I'm just learning as a passion =)

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论