在网格中显示 wordpress 帖子 - 并排 div答案

【问题标题】：Show wordpress posts in a grid - side by side divs在网格中显示 wordpress 帖子 - 并排 div
【发布时间】：2015-11-27 17:17:18
【问题描述】：

我尝试使用下面的代码以并排的方式在网格中显示帖子。但是，如图所示，div 出现损坏。

<?php

  $args = array( 'posts_per_page' => 15, 'offset'=> 1, 'category' => '' );

   $myposts = get_posts( $args );
   foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
     <div class="container"  style="width:960px;margin :opx auo;">

        <div class="colk" style="width:200px;height:150px;border-style:dotted;border-width:thin;display:inline-block;
float:left;clear:top;margin: 5px 20px 15px 0px;margin:10px;margin-top:0px;clear:top;" >

    <a href="<?php the_permalink(); ?>">  <?php   the_title(); echo '<br>' ?> </a> 


  </div>
   </div>
 <?php echo '<br>'; ?>      
  <?php  endforeach;  ?>


  <?php
   wp_reset_postdata();  ?>

如何显示 div 内联？

【问题讨论】：

不太清楚你所说的“并排”方式是什么意思。如果您希望它们对齐，则要么将它们全部向左浮动，要么更好，因为它们都是 inline-block 将 vertical-align:top; 添加到它们，因此它们都将对齐。
@dingo_d ..它不起作用..我需要并排显示所有 div，你看到图像了吗？
如果您的意思是在一条线上，那么这将不起作用，因为您将它们设置为 200x150 像素，并且您在它们所在的容器中只有有限的空间（准确地说是 960 像素）。如果你想让它们都排成一行，你的容器必须比那个大...

标签： html wordpress css wordpress-theming

【解决方案1】：

    <?php

    $args = array( 'posts_per_page' => 15, 'offset'=> 1, 'category' => '' );

       $myposts = get_posts( $args );?>
        <div class="container"  style="width:960px;margin :0 auto;">
      <?php  foreach ( $myposts as $post ) : setup_postdata( $post ); ?>


            <div class="colk" style="width:200px;height:150px;border-tyle:dotted;border-width:thin;display:inline-block;float:left;clear:top;margin: 5px 20px 15px 0px;margin:10px;margin-top:0px;clear:top;" >

        <a href="<?php the_permalink(); ?>">  <?php   the_title();?> </a> 


      </div>


      <?php  endforeach;  ?>
     </div>

【讨论】：