我如何将循环分为2个不同的div,并在每个div中传递3个帖子,然后重复进行直到结束

时间:2018-10-20 06:58:49

标签: wordpress loops

假设我有两个名为div1和div2的HTML div。我想将div1、1、2、3rd和div2中的4、5、6th传递给我。接下来的3个将进入div1,接下来的3个将进入div2,这种情况将一直持续到结束

vq

2 个答案:

答案 0 :(得分:0)

    <div class="sitecontainer">

      <div class="tips-and-news-wrap left-containrer">

        <ul class="tips-and-news-posts">

           <?php 

           if ( have_posts() ) {

             while ( have_posts() ) { the_post(); 

               <li><?php the_title();</li> //this will display the 1st post to 9th post

             } // end while

           } // end if

          ?>

        </ul>

      </div>

   </div>

如果需要实现以下布局。您需要在CSS中进行。有很多方法可以做到这一点。我更喜欢使用flexbox。这是您所用的代码:

<style>
ul.tips-and-news-posts{
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
ul.tips-and-news-posts li{
  width: 30%;
  height: 300px;
  margin: 5px;
}
<style>

enter image description here

答案 1 :(得分:0)

假设您将帖子放置在某个数组中。问题是将数组中的每个项目映射到DIV标签之一。

$cars = array("Volvo", "BMW", "Toyota", "Hyundai", "Porsche","Ferrari","Jaguar");
$len = count($cars); // Get length of array
$div = 1; // initialize div to 1

for ($i = 0; $i < $len; $i++) {
   if ($i%3 == 0){        // $div value would switch after 3 post. You can change this 3 to any value
      $div = ~ $div + 2 ;  // logic to convert 0 to 1 and vice versa
    }
   echo $cars[$i]." ".$div."<br>"; 
}