我想将我的 wordpress 帖子显示为 2 行，每行将包含 2 个帖子

Question

我正在处理默认博客主页代码。我在每个博客页面上有 4 个帖子。现在它们垂直显示（一个接一个，上下）。我想将这 4 个帖子显示为 2 行，每行将包含 2 个帖子。这是博客页面的代码。我使用普通 CSS 将它们设为 2 列。

<div class="amplify-content w-100 align-items-stretch order-0">
        <div class="content-list">
            <div class="mb-4"><strong class="text-uppercase">Category</strong> Graphic Design Lab</div>
            <div class="columncontent">
            <div class="row gutter-30 mb-4">
                <div class="col-12 col-md-6">

                    <main role="main">
                        <!-- section -->
                        <section class="bl">
                            <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                            <!-- article -->
                            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <!-- post thumbnail -->
                                <span class="blgimg"><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                                </a>
                                <?php endif; ?></span>
                                <!-- /post thumbnail -->
                                <!-- post details -->
                                <br/>
                                <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>

                                <!-- /post details -->
                                <!-- post title -->
                                <h2 style="font-family: Journal-Regular;color: #d20a1e !important;text-transform: uppercase!important;" class="blgg">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                                </h2>
                                <!-- /post title -->
                                <!-- button -->
                                    <a href="<?php the_permalink(); ?>" class="btn btn-outline-red rounded-0"><b>READ MORE</b></a><br/>
                                <!-- /button -->    
                                <!-- <span class="write" style="width:80% !important;"><?php the_excerpt(); // Dynamic Content ?></span> -->
                                <br/>          
                                <?php comments_template(); ?> 
                            </article>
                            <!-- /article -->
                            <?php endwhile; ?>
                            <?php get_the_posts_pagination(); ?> 
                            <?php else: ?>
                            <!-- article -->
                            <article>
                                <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
                            </article>
                            <!-- /article -->
                            <?php endif; ?>
                        </section>
                        <!-- /section -->
                    </main>
                </div>
                <div class="col-12 col-md-6">
                </div>
            </div>
            </div>
        </div>
    </div>

Answer 1

好的。试试这个，看看它是怎么回事。

<div class="amplify-content w-100 align-items-stretch order-0">
    <div class="content-list">
        <div class="mb-4"><strong class="text-uppercase">Category</strong> Graphic Design Lab</div>
        <div>
        <div>
            <div class="col-12">

                <main role="main">
                    <!-- section -->
                    <section class="bl row">
                        <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                        <!-- article -->
                        <article id="post-<?php the_ID(); ?>" class="col-xs-12 col-sm-6">
                            <!-- post thumbnail -->
                            <span class="blgimg"><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                            <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                            </a>
                            <?php endif; ?></span>
                            <!-- /post thumbnail -->
                            <!-- post details -->
                            <br/>
                            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>

                            <!-- /post details -->
                            <!-- post title -->
                            <h2 style="font-family: Journal-Regular;color: #d20a1e !important;text-transform: uppercase!important;" class="blgg">
                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                            </h2>
                            <!-- /post title -->
                            <!-- button -->
                                <a href="<?php the_permalink(); ?>" class="btn btn-outline-red rounded-0"><b>READ MORE</b></a><br/>
                            <!-- /button -->    
                            <!-- <span class="write" style="width:80% !important;"><?php the_excerpt(); // Dynamic Content ?></span> -->
                            <br/>          
                            <?php comments_template(); ?> 
                        </article>
                        <!-- /article -->
                        <?php endwhile; ?>
                        <?php get_the_posts_pagination(); ?> 
                        <?php else: ?>
                        <!-- article -->
                        <article>
                            <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
                        </article>
                        <!-- /article -->
                        <?php endif; ?>
                    </section>
                    <!-- /section -->
                </main>
            </div>
            <div class="col-12 col-md-6">
            </div>
        </div>
        </div>
    </div>
</div>

此外，您应该进入索引文件并将第 53 行替换为 .blgimg img{width: 100%;} 而不是 .blgimg img{width: 250px;height:250px;}