Question

我的HTML结构如下：

<div class="container">

<div class=row 1>
<img src="#" />
<img src="#" />
</div>

<div class=row 2>
<img src="#" />
<img src="#" />
</div>

<div class=row 3>
<img src="#" />
<img src="#" />
</div>

</div>

我将使用for each循环。在for each循环的每两次迭代之后，我想要启动新容器div和row 1，row 2和row 3 div s。我的意思是主div应该包裹3行，每行div将包装两个图像或div。我正在使用一个循环。我该如何应用for each循环计数器？

Answer 1

假设您有一系列图像或其他内容要放入这些div中。这是您必须做的概念，然后您可以根据需要调整它或使用您喜欢的编码样式：

<?php

$contents = array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg','img6.jpg');

echo '<div class="container">'; 

$rowCount = 0;

foreach ($contents as $key => $value) {

    if ($key % 2 == 0) {

        if ($key > 0) {

            echo "</div><!--close .row-->";
        }

        $rowCount++;

        echo '<div class="row row' . $rowCount . '"><!--opening .row-->';
    }

    echo '<img src="' . $value . '" alt="This is image: ' . $value . '">';

}

echo '</div><!--close .row-->';
echo '</div><!--close .container-->';

它将呈现：

<div class="container">
    <div class="row row1"><!--opening .row-->
        <img src="img1.jpg" alt="This is image: img1.jpg">
        <img src="img2.jpg" alt="This is image: img2.jpg">
    </div><!--close .row-->
    <div class="row row2"><!--opening .row-->
        <img src="img3.jpg" alt="This is image: img3.jpg">
        <img src="img4.jpg" alt="This is image: img4.jpg">
    </div><!--close .row-->
    <div class="row row3"><!--opening .row-->
        <img src="img5.jpg" alt="This is image: img5.jpg">
        <img src="img6.jpg" alt="This is image: img6.jpg">
    </div><!--close .row-->
</div><!--close .container-->

它适用于您放入阵列的任何数量的图像。

Answer 2

您可以使用数组块来执行此操作，请参阅以下代码：

foreach (array_chunk($yourArray, 2, true) as $results)
{
     <div class="row">
      foreach($results as $result)
       {
         //display it here 
       }
     </div>
}

在循环中包裹每两个Div

2 个答案: