如何在图像下显示具有多个相等列的 WordPress 博客文章？答案

【问题标题】：How to display WordPress blog posts with multiple equal columns under image?如何在图像下显示具有多个相等列的 WordPress 博客文章？
【发布时间】：2017-02-10 06:35:15
【问题描述】：

我正在尝试像杂志文章一样显示所有博客文章。有关确切格式，请参阅下面的链接。

http://imgur.com/a/jKAlM

Single.php

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 main-blog">

            <?php 

        if(have_posts()):

            while(have_posts()): the_post(); ?> 

                <?php the_title('<h1 class="entry-title">', '</h1>'); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?


                <div class="article-single">

                <p><?php the_content(); ?></p>

                </article>

            <?php endwhile;

        endif;


        ?>

        </div>
    </div>
</div>

CSS

.article_single {

    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-gap: 30px;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    font-family: Garamond;
    column-count: 3;


}

无论我对内容做什么，都会调整图像的大小。如何在不弄乱图像的情况下显示内容？

【问题讨论】：

对特色图片以及 HTML 和 CSS 的 PHP 调用在哪里？
图片已通过仪表板手动插入到帖子中。我还没有尝试使用对特色图像的调用。 HTML 和 CSS 已发布在问题中。

标签： php html css wordpress posts

【解决方案1】：

不确定您的问题到底是什么，因为这里没有显示特色图片的调用，但值得指出的是您的：

<div class="article-single">

在任何地方都没有结束 </div> 标记。这可能会破坏您的布局。似乎它应该出现在您的 </article>

之前

【讨论】：

【解决方案2】：

我通过添加特色图片调用解决了这个问题。谢谢！

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 main-blog">



            <?php 

        if(have_posts()):

            while(have_posts()): the_post(); ?> 

                <?php the_title('<h1 class="entry-title">', '</h1>'); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?   >>








                 <?php if(has_post_thumbnail()): ?>

                    <div class="text-center"><?php the_post_thumbnail('large'); ?></div>

                <?php endif; ?>

                <div class="article_single">

                <p><?php the_content(); ?></p>


                </article>





            <?php endwhile;

        endif;


        ?>

    </div>
</div>

【讨论】：