每个循环将项目分组3英寸

Question

我有一个项目数组，想要循环遍历它们，而不是将它们分组到div中，我想用css类对它们进行分组。

我不想进行div分组，因为移动视图可能有4个或更多，并且break css类会随着屏幕尺寸的变化而改变，或者会移动到绝对定位，一起移除中断并形成网格

我可以每隔3个项目创建一次休息，但是课程分配我很难挣扎。

任何帮助都将不胜感激。

我想在PHP foreach循环中创建以下布局。

离。

<div class="listing">
   <div class="group_1">item1</div>
   <div class="group_1">item2</div>
   <div class="group_1">item3</div>

   <div class="break_1"></div>

   <div class="group_2">item4</div>
   <div class="group_2">item5</div>
   <div class="group_2">item6</div>

   <div class="break_2"></div>

   <div class="group_3">item7</div>
   <div class="group_3">item8</div>
   <div class="group_3">item9</div>

   <div class="break_3"></div>

   <div class="group_4">item10</div>
   <div class="group_4">item11</div>
   <div class="group_4">item12</div>

   <div class="break_4"></div>
</div>

Answer 1

如果我们有以下项目数组：

flex

这是一个示例输出

Answer 2

不管怎么说，不管怎样，给出一个像这样的基本数组：

$arr=array(1,2,3,4,5,6,7,8,9,10,11,12);

你可以循环它并拥有你期望的代码：

$group_num=1;
echo "<div class='listing'>";
foreach ($arr as $key=>$item) {

    echo "<div class='group_$group_num'>$item</div>";
    if ($key%3==0) {
        echo "<div class='break'></div>";
        $group_num++;
    }
}
echo "</div>";

结果：

<div class='listing'>
<div class='group_1'>1</div>
<div class='group_1'>2</div>
<div class='group_1'>3</div>

<div class='break'></div>

<div class='group_2'>4</div>    
<div class='group_2'>5</div>    
<div class='group_2'>6</div>

<div class='break'></div>

<div class='group_3'>7</div>
<div class='group_3'>8</div>
<div class='group_3'>9</div>

<div class='break'></div>

<div class='group_4'>10</div>
<div class='group_4'>11</div>
<div class='group_4'>12</div>

<div class='break'></div>

Answer 3

感谢Giacomo Pittalis和Hassan Ali Salem的帮助，我已经设法以一种粗暴的方式解决了这个问题。

<?php
    $items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
    $i = 0;
    $len = count($items);
    foreach ($items as $item) {
        $mod = intval(floor($i / 3) + 1);

        echo '<div class="' . 'group_' . $mod . '">' . $items[$i] . '</div>';

        if (($i % 3 == 2)) { ?>
            <div class="content_holder hidden" id="group_<?php echo $mod; ?>"></div>
        <?php }

        if ($i == $len - 1) { ?>
            <div class="content_holder hidden" id="group_<?php echo $mod; ?>"></div>
        <?php }
        $i++;
    }
?>