如何在图像下显示多个相等列的WordPress博客帖子？

Question

我试图显示所有博客文章，如杂志文章。 请参阅下面的链接了解确切的格式。

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;


}

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

Answer 1

不确定你的问题究竟是什么，因为这里没有显示特色图片的电话，但值得指出你的：

<div class="article-single">

在任何地方都没有结束</div>标签。 这可能是你的布局。 好像它应该在你的</article>

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