每4次迭代创建行并关闭div

时间:2018-11-26 07:12:27

标签: php html css html5 css3

假设这是我分配给$ my_array变量的数据数组。

[0] => Array
    (
        [0] => 0 seconds
        [1] => 05:00 PM to 6:00 PM
    )

[1] => Array
    (
        [0] => 6 minutes
        [1] => 08:00 AM to 9:00 AM
    )

[2] => Array
    (
        [0] => 15 minutes
        [1] => Array
            (
                [0] => 08
                [1] => 15 AM
            )

    )

[3] => Array
    (
        [0] => 15 minutes
        [1] => Array
            (
                [0] => 08
                [1] => 30 AM
            )

    )

[4] => Array
    (
        [0] => 15 minutes
        [1] => Array
            (
                [0] => 08
                [1] => 45 AM
            )

    )

[5] => Array
    (
        [0] => 15 minutes
        [1] => 09:00 AM to 10:00 AM
    )

[6] => Array
    (
        [0] => 15 minutes
        [1] => Array
            (
                [0] => 09
                [1] => 15 AM
            )

    )

[7] => Array
    (
        [0] => 15 minutes
        [1] => Array
            (
                [0] => 09
                [1] => 30 AM
            )

    )

[8] => Array
    (
        [0] => 15 minutes
        [1] => Array
            (
                [0] => 09
                [1] => 45 AM
            )

    )

[9] => Array
    (
        [0] => 6 minutes
        [1] => 10:00 AM to 11:00 AM
    )

[10] => Array
    (
        [0] => 6 minutes
        [1] => Array
            (
                [0] => 12
                [1] => 30 PM
            )

    )

)

我有这样的东西:

foreach($my_array as $key => $a) {
    if(!is_array($a[1)) { ?>
        <div><?php echo $a; ?></div>
        <?php if($key % 4 == 0) { ?>
             <div class="row">
       <?php } ?>
    <?php } ?>

       <div class="col-md-3">
            <?php echo $a[0]; ?>
       </div>

    <?php if(!is_array($a[1)) { ?>
        <?php if($key % 4 == 0) { ?>
             </div>
        <?php }
    } ?>
}

我要实现的是,如果第二个数组元素不是数组“ if(!is_array($ a [1))”,并经过4次迭代,则关闭div,以4列创建新行。

为清楚起见,我根据上面给出的数据创建了一个静态html,它是我想要实现的目标:

输出应该完全像这样:

enter image description here

1 个答案:

答案 0 :(得分:2)

我对所有打开和关闭PHP标记进行了一些清理,并选择回显HTML代码。清除了一些语法错误。

foreach($my_array as $key => $a) {

    if(!is_array($a[1])) {
        echo "<div>" . $a[1] . "</div>\n";
        if($key % 4 == 0) {
            echo "<div class=\"row\">\n";
        }
    }

    // create a new row div before the fourth divisible index.
    // this was necessary to insert the div below the timeblock div ($a[1])
    if((($key - 1) % 4) == 0) {
        echo "<div class=\"row\">\n";
    }

    echo "\t<div class=\"col-md-3\">" . $a[0] . "</div>\n";

    // added condition to close the row div on the last item
    if(($key % 4 == 0) || ($key == (count($my_array) -1))) {
        echo "</div>\n";
    }
}