我正在经历一件非常奇怪的事情，我似乎无法理解。我正忙着写我自己的主题。这并没有什么特别或超级先进的，只是想要一个有趣的项目，并得到一点自定义。

在主页上，我希望帖子显示在砖石风格的pinterest克隆卡UI中。我已经使用Foundation设置了HTML和CSS。在我使用WP循环拉入帖子之前，一切都是100%正常工作的。

下面是我硬编码HTML时的外观：

下面是我使用WP循环从内容中拉入时的外观。php：

我还移动了内容的内容。php在索引上的循环中。php，我也遇到了同样的问题。我真的搞不懂。

主页代码：

<?php get_header(); ?>
<div class="row" id="content">
    <div class="medium-9 columns">
        <article>
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                       get_template_part( \'content\' );
                    endwhile;
                else :
                    echo wpautop( \'Sorry, no posts were found\' );
                endif;
            ?>
        </article>
    </div>
    <?php get_sidebar(); ?>
</div><!-- End row-->

内容代码：

<section class="animated fadeIn">
<div class="ribbon"><span>Eat This</span></div>
<img src="<?php echo the_post_thumbnail(); ?>" />
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<div class="cats-block">
    <?php
        $posttags = get_the_tags();
        if ($posttags) {
            foreach($posttags as $tag) {
                echo \'<span class="category label">\' . $tag->name . \'</span> \'; 
            }
        }
    ?>
</div>

CSS：

.bob article {
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}

.bob section {
  position: relative;
  display: inline-block;
  margin: 0.25rem;
  padding: 1rem;
  width: 100%;
  background: #E5E5E5;
  border-radius: 5px;
}

有点沮丧。任何帮助都将不胜感激。

<?php get_header(); ?>
<div class="row" id="content">
    <div class="medium-9 columns">
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                       get_template_part( \'content\' );
                    endwhile;
                else :
                    echo wpautop( \'Sorry, no posts were found\' );
                endif;
            ?>
    </div>
    <?php get_sidebar(); ?>
</div><!-- End row-->

<article>
<section class="animated fadeIn">
<div class="ribbon"><span>Eat This</span></div>
<img src="<?php echo the_post_thumbnail(); ?>" />
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<div class="cats-block">
    <?php
        $posttags = get_the_tags();
        if ($posttags) {
            foreach($posttags as $tag) {
                echo \'<span class="category label">\' . $tag->name . \'</span> \'; 
            }
        }
    ?>
</div>
</section>
</article>