Как я могу разделить цикл на 2 разных div и пропустить 3 сообщения за div и повторять до конца

Question

Предположим, у меня есть 2 HTML div с именами div1 и div2.Я хотел передать 1, 2, 3 пост в div1 и 4, 5, 6 пост в div2.и следующие 3 перейдут в div1, а следующие 3 перейдут в div2, и это будет продолжаться до конца

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

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

				<li>1st Post</li>
				<li>2nd Post</li>
				<li>3rd one</li>
	
			</ul>

		</div>
					
		<div class="tips-and-news-wrap right-conatiner">

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

					<li>4th post</li>
					<li>5th post</li>
					<li>6th post</li>

				</ul>

		</div>

	</div

Answer 1

Предположим, у вас есть сообщение в некотором массиве.Проблема состоит в том, чтобы сопоставить каждый элемент в массиве с одним из тегов 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>"; 
}

Answer 2

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