首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >我想将我的wordpress帖子显示为2行,每行将包含2个帖子

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

Stack Overflow用户
提问于 2018-06-06 01:02:18
回答 1查看 129关注 0票数 0

我正在处理默认的博客主页代码。我在每个博客页面上有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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-06 05:41:52

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

<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>

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50705413

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档