Php 如何以网格顺序在视图中显示结果集图像

我从数据库中获取了所有记录并传递到视图。 数据数组：

Array ( 
  [image_info] => 
     Array ( [0] =>
       Array ( [file_name] => DSC00081.JPG  )
             [1] => 
       Array ( [file_name] => DSC00082.JPG  ) 
             [2] => 
       Array ( [file_name] => DSC00083.JPG )
     )
   )

我想以以下格式显示视图中的所有图像

我想在第一列中显示第一个图像，第二个图像（如果在结果集中存在）必须在第二列中，同样，它继续..第四个图像（如果在结果集中存在）必须在第二行。。 到目前为止，我已经尝试了以下方法

<section id="services" class="services-section section-global-wrapper">
<div class="container">
            <div class="row">

            <ul>
            <div class="col-md-4 col-sm-6">
                <?php 
                foreach($image_info as $images)
                { ?>
                    <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>
                <?php } ?>

            </div>  

            </ul>

          </div>

        </div>

</section>

上传/“height=“400”alt=“第二个旋转木马的图像”/>

我无法得到我想要的。

    <section id="services" class="services-section section-global-wrapper">
    <div class="container">
 <?php $i=0;
                    foreach($image_info as $images)
                    { if($i%3==0) { ?>
                <div class="row">
   <?php } ?>  <ul>
                <div class="col-md-4 col-sm-6">

                        <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>


                </div>  
     </ul>

   <?php if($i%3==2) { ?>
              </div>
 <?php } $i++; } ?>

            </div>

    </section>


上传/“height=“400”alt=“第二个旋转木马的图像”/>

你需要重新定位循环

上传/“height=“400”alt=“第二个旋转木马的图像”/>

您需要重新定位循环！

试试这个

<section id="services" class="services-section section-global-wrapper">
    <div class="container">


            <?php 
            $Inc = 1;
            foreach($image_info as $images){ 
                if($Inc==4 || $Inc==1){ 
                $Inc=1;                     
                echo '<div class="row">';                       
            }
            ?>
                <div class="col-md-4 col-sm-6">
                    <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>
                </div>  

            <?php 

                $Inc++;
            if($Inc==4){                                            
                echo '</div>';                      
            }
                } 
            ?>

      </div>

    </div>

</section>

上传/“height=“400”alt=“第二个旋转木马的图像”/>

试试这个

<section id="services" class="services-section section-global-wrapper">
    <div class="container">


            <?php 
            $Inc = 1;
            foreach($image_info as $images){ 
                if($Inc==4 || $Inc==1){ 
                $Inc=1;                     
                echo '<div class="row">';                       
            }
            ?>
                <div class="col-md-4 col-sm-6">
                    <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>
                </div>  

            <?php 

                $Inc++;
            if($Inc==4){                                            
                echo '</div>';                      
            }
                } 
            ?>

      </div>

    </div>

</section>

上传/“height=“400”alt=“第二个旋转木马的图像”/>

是否检查了此值

$images['folder\u name']

？@vel是的，马上就要来了。@Keynes，检查我的答案，我想应该可以！如果不让我知道的话。@Keynes，你能用3个以上的值检查一下吗？我也更新了我的答案。@ShaunakShukla，我尝试了5张图片，但是图片没有按照我在上图中所示的方式列出。我需要在图片之间添加一些填充很好..！您是否检查了此值

$images['folder\u name']

？@vel是的，马上就要来了。@Keynes，检查我的答案，我想应该可以！如果不让我知道的话。@Keynes，你能用3个以上的值检查一下吗？我也更新了我的答案。@ShaunakShukla，我尝试了5张图片，但是图片没有按照我在上图中所示的方式列出。我需要在图片之间添加一些填充好吧..好吧，它是按顺序来的…但是如果我有第四个图像呢。它会转到第二行吗？我没有给你-ve投票或+ve投票…你给了我-ve吗？你能尝试使用3个以上的值吗？我尝试了5个值，它不会转到第二行，但我没有得到我在上面的图像中提到的期望的外观。我还需要图像之间的间隙好吗，但你会在3之后将它们放在新的行中，对吗？很好，它是按顺序排列的…但是如果我有第四个图像，它会转到第二行吗？我没有给你-ve一票或+ve一票…你给了我-ve吗？你能尝试使用3个以上的值吗？我尝试了5个值，它不到第二行，但我没有得到我在图像中提到的期望外观上图..我也需要图像之间的间隙好的，但是你在3之后将它们放在新行中，对吗？我将获得列出的图像，但没有上面图像中所示的正确格式..！是否可以在网格视图中使用正确的css显示？它工作得很好，两个代码都工作..我将编辑答案，然后用css链接我正在获取列出的图像，但没有如上图所示的正确格式..！是否可以在网格视图中使用正确的css显示？它工作正常，两个代码都工作..我将编辑答案，并使用css链接发布