如何以四列格式从左到右水平显示动态创建的帖子

I am new at php and I want to create a menu of four columns that will dynamically include all of the sub-posts of the parent post as clickable links. After some research I wrote the following code:

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

The problem is that the code is displaying the result in vertical order:

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

And the desired order of display is horizontal:

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

Is there a way to control the order of the dynamically created elements through the use of php? Thanks in advance for your help :)

you can try this

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

But i suggest to study/use Bootstrap. It has many ready made css and javascript easy to use.