如何以四列格式

时间:2017-02-28 10:16:48

标签: php wordpress

我是php的新手,我想创建一个包含四列的菜单,这些列将动态地包含父帖子的所有子帖子作为可点击链接。经过一些研究,我写了下面的代码:

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来控制动态创建的元素的顺序?在此先感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

你可以试试这个

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

但我建议学习/使用Bootstrap。它有许多现成的css和javascript易于使用。