動的に作成された投稿を左から右に4列のフォーマットで水平に表示するには

Question

私はphpで新しく、親投稿のすべてのサブ投稿を動的に含む4つの列のメニューを作成したいクリック可能なリンクとして。いくつかの研究の後、私は次のコードを書いた：

function add_childrens_list($children) { 
    $children_list = ""; 
    $childercount = count($children); 
    $size = 0; 
    if($childercount <= 3) { 
     $size = 1; 
    } 
    elseif($childercount > 3 && $childercount < 7) { 
     $size = 2; 
    } 
    elseif($childercount >= 3 && $childercount < 9) { 
     $size = 3; 
    } 
    else { 
     $size = 4; 
    } 


     $chunks = array_chunk($children, ceil($childercount/$size)); 

    if(is_array($children)) { 
     $children_list .= "<div class='vc_row menu_container'>"; 
     foreach ($chunks as $i => $piece) { 
      # code... 
      if ($size === 1) { 
       $children_list .= "<div class='vc_col-sm-12'>"; // one-column set width:100% 
      } 
      else if ($size === 2) { 
       $children_list .= "<div class='vc_col-sm-6'>"; // two-columns set width: 50% 
      } 
      else if ($size === 3) { 
       $children_list .= "<div class='vc_col-sm-4'>"; // two-columns set width: 33,33% 
      } 
      else { 
       $children_list .= "<div class='vc_col-sm-3'>"; // three-column set width: 25% 
      } 
       $children_list .= "<ul>"; 

      foreach ($piece as $child) { 
       $parent_post = get_post($child['post_id']); 
       $children_list .= "<li><a href='#page-".$parent_post->post_name."'>".$child['title']."</a></li>"; 
      } 
      $children_list .= "</ul>"; 
      $children_list .= "</div>"; 
     } 

     $children_list .="</div>"; 

    } 

    return $children_list; 
} 

問題は、コードが垂直順に結果が表示されていることである。

child 1 child 4 child 7 child 10 
    child 2 child 5 child 8 child 11 
    child 3 child 6 child 9 child 12 

とディスプレイの所望の順序が水平である：

child 1 child 2 child 3 child 4 
    child 5 child 6 child 7 child 8 
    child 9 child 10 child 11 child 12 

phpを使用して動的に作成された要素の順序を制御する方法はありますか？あなたの助けを事前に感謝:)

Answer 1

あなたはこの

<style> 
     .container { width: 100%; } 
     .col { width: 25%; float: left; } 
    </style> 
    <div class="container"> 
     <?php $data = array(1,2,3,5,6,7,8,9); 
     foreach($data as $d) { ?> 
      <div class="col"> 
       <?php echo $d; ?> 
      </div> 
     <?php } ?> 
    </div> 

を試すことができますが、私はブートストラップを使用/勉強することをお勧めします。それは多くの準備ができたCSSとjavascriptを使いやすくしています。