Php 循环生成列模式，而不是并排

我试图为wordpress的帖子重新创建这个结构，这样帖子就可以在三列中依次放置它们

正确的html格式

<div class="clearfix colelem" id="ppu6561"><!-- group -->
 <div class="clearfix grpelem" id="pu6561"><!-- group -->
  <a class="nonblock nontext clip_frame clearfix grpelem" id="u6561" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><!-- image --><div id="u6561_clip"><img class="position_content" id="u6561_img" src="images/img_2454.jpg" alt="" width="288" height="216"/></div></a>
  <div class="rgba-background clearfix grpelem" id="u527"><!-- group -->
   <div class="clearfix grpelem" id="u704-11"><!-- content -->
    <p id="u704-3"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704">50 CITIES CHALLENGE</span></a></p>
    <p id="u704-6"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-4">FOLLOW MY ADVENTURES AS I VISIT</span></a></p>
    <p id="u704-9"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-7">EVERY CITY IN ENGLAND</span></a></p>
   </div>
  </div>
 </div>
 <a class="nonblock nontext clip_frame clearfix grpelem" id="u7092" href="eurotrip.html"><!-- image --><div id="u7092_clip"><img class="position_content" id="u7092_img" src="images/social%20euro291x207.jpg" alt="" width="290" height="207"/></div></a>
 <a class="nonblock nontext clip_frame clearfix grpelem" id="u6785" href="http://www.socialartist.co.uk/blog/top-tips-for-overcoming-limiting-beliefs/"><!-- image --><div id="u6785_clip"><img class="position_content" id="u6785_img" src="images/limiting.jpg" alt="" width="346" height="207"/></div></a>
 <div class="rgba-background clearfix grpelem" id="u526"><!-- group -->
  <div class="pointer_cursor clearfix grpelem" id="u703-9"><!-- content -->
   <a class="block" href="http://www.socialartist.co.uk/blog/top-tips-for-overcoming-limiting-beliefs/"></a>
   <h1 class="H1" id="u703-3"><a class="nonblock" href="http://www.socialartist.co.uk/blog/top-tips-for-overcoming-limiting-beliefs/"><span id="u703">OVERCOME LIMITING BELIEFS</span></a></h1>
   <p id="u703-5"><span id="u703-4">WHAT ARE LIMITING BELIEFS? AND WHY</span></p>
   <p id="u703-7"><span id="u703-6">&nbsp;THEY'RE HOLDING YOU BACK</span></p>
  </div>
 </div>
 <div class="rgba-background clearfix grpelem" id="u530"><!-- group -->
  <div class="clearfix grpelem" id="u705-11"><!-- content -->
   <p id="u705-3"><a class="nonblock" href="eurotrip.html"><span id="u705">EUROTRIP</span></a></p>
   <p id="u705-6"><a class="nonblock" href="eurotrip.html"><span id="u705-4">10 DAY TRAVELLING MASTERCLASS FOR</span></a></p>
   <p id="u705-9"><a class="nonblock" href="eurotrip.html"><span id="u705-7">&nbsp;SOCIAL SKILLS AND RELATIONSHIPS</span></a></p>
  </div>
 </div>
</div>

什么是限制性信念？为什么

他们在拖你后腿

但我使用的php似乎做得不对，出于某种原因，它被迫进入列模式

  <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

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

        <?php while( have_posts() ): the_post();$i++;  ?>


      <div class="clearfix colelem" id="ppu6561"><!-- group --> 
     <div class="clearfix grpelem" id="pu6561"><!-- group -->
      <a class="nonblock nontext clip_frame clearfix grpelem" id="u6561" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><!-- image --><div id="u6561_clip">  <?php the_post_thumbnail( array(400,400) ); ?> </div></a>
      <div class="rgba-background clearfix grpelem" id="u527"><!-- group -->
       <div class="clearfix grpelem" id="u704-11"><!-- content -->

        <p id="u704-3"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704"><?php the_title(); ?></span></a></p>
        <p id="u704-6"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-4"><?php printf("%s",$postsubtext);?></span></a></p>
        <p id="u704-9"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-7">EVERY CITY IN ENGLAND</span></a></p>
       </div>


 </div>
 <?php  
     if($i % 2 == 0) {echo '</div>';} 
     ?>

      <?php endwhile; ?>   

    <?php endif; wp_reset_query(); ?>

这是由上面的查询生成的html

        <div class="clearfix colelem" id="ppu6561"><!-- group -->
       <div class="clearfix grpelem" id="pu6561"><!-- group -->
         <a class="nonblock nontext clip_frame clearfix grpelem" id="u6561" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><!-- image --><div id="u6561_clip">  <img width="346" height="206" src="http://localhost:1337/globalgames/wp-content/uploads/2015/04/limiting.jpg" class="attachment-400x400 wp-post-image" alt="limiting" /> </div></a>
        <div class="rgba-background clearfix grpelem" id="u527"><!-- group -->
         <div class="clearfix grpelem" id="u704-11"><!-- content -->

          <p id="u704-3"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704">50 CITIES CHALLENGE</span></a></p>
          <p id="u704-6"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-4"></span></a></p>
          <p id="u704-9"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-7">EVERY CITY IN ENGLAND</span></a></p>
       </div>


      </div>
      </div>


      <div class="clearfix colelem" id="ppu6561"><!-- group -->
     <div class="clearfix grpelem" id="pu6561"><!-- group -->
      <a class="nonblock nontext clip_frame clearfix grpelem" id="u6561" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><!-- image --><div id="u6561_clip">  <img width="288" height="216" src="http://localhost:1337/globalgames/wp-content/uploads/2015/04/img_2454.jpg" class="attachment-400x400 wp-post-image" alt="img_2454" /> </div></a>
      <div class="rgba-background clearfix grpelem" id="u527"><!-- group -->
       <div class="clearfix grpelem" id="u704-11"><!-- content -->

        <p id="u704-3"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704">Hello world!</span></a></p>
        <p id="u704-6"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-4"></span></a></p>
        <p id="u704-9"><a class="nonblock" href="http://www.socialartist.co.uk/blog/category/50-cities-challenge/"><span id="u704-7">EVERY CITY IN ENGLAND</span></a></p>
       </div>


 </div>

请澄清您的问题： “循环生成列模式，而不是并排”

列=并排。。 相反=不是

我找不到它。那么，它们是在彼此之上，而不是并排吗

---

如果您提供一些用于检查的活动链接，将更有帮助。

在正确的HTML格式代码中，您是否可以指示post范围的开始和结束？可能类似于

和

。对我来说，现在还不清楚这些职位是如何分离的。