php循环重复执行

Question

我可以在这段代码中修改什么使来自这的输出看起来像这

的两个‘这个’链接是屏幕截图的布局，，我希望所有的框在一起/相邻，就像第二个截图一样。

我用html编程了布局，它在尝试php时起了作用，布局只是搞砸了。

function getTest(){

  global $con;

  $get_pro = "select * from drinks";

    $run_pro = mysqli_query($con, $get_pro); 

    while($row=mysqli_fetch_array($run_pro)){

    $id = $row['id'];
    $title = $row['title'];
      $cat = $row['cat'];
      $image = $row['image'];
      $desc = $row['desc'];
      $qty = $row['qty'];
      $price =$row['price'];
      $status= $row['status'];


echo "<!--==========================\n"; 
echo "  Price Menu\n"; 
echo "============================-->\n"; 
echo "      <!-- Page Content -->\n"; 
echo "      <main class=\"entry-content\">\n"; 
echo "          <section class=\"page-section\">\n"; 
echo "              <div class=\"container\">\n"; 
echo "              \n"; 
echo "                  <div class=\"row\">\n"; 
echo "                      <div class=\"col-md-12\">\n"; 
echo "                          <div class=\"isotope-filters\" role=\"group\">\n"; 
echo "                              <div class=\"btn-group\">\n"; 

// the categories go here

echo "                              </div>\n"; 
echo "                          </div>\n"; 
echo "                      </div>\n"; 
echo "                  </div>\n"; 
echo "                  <br><br>\n"; 
echo "                  <div class=\"row isotope-wrapper isotope-beers-wrapper\">\n"; 
echo "                      <div class=\"isotope isotope-beers gutter\">\n"; 
echo "                          <div class=\"grid-item col-lg-3 col-md-3 col-sm-6 col-ms-6 col-xs-12 $cat\">\n"; 
echo "                              <div class=\"grid-wrapper\">\n"; 
echo "                                  <a href=\"javascript:void(0);\" data-remodal-target=\"bottle-$id\">\n"; 
echo "                                      <figure style=\"background-image: url('admin/images/drinks/$image')\">\n"; 
if ($row['status'] === 'Yes'){
echo "                                      <div class=\"offer\"></div>\n"; 
}
echo "                                          <figcaption class=\"grid-content\">\n"; 
echo "                                              <h5 class=\"grid-title\"><span>$title</span></h5>\n"; 
echo "                                          </figcaption>\n"; 
echo "                                      </figure>\n"; 
echo "                                  </a>\n"; 
echo "                              </div>\n"; 
echo "                          </div>\n"; 
echo "                      </div>\n"; 
echo "                  </div>\n"; 
echo "\n"; 
echo "              </div>\n"; 
echo "          </section>\n"; 
echo "      </main><!-- /.enry-content -->\n"; 
echo "\n"; 
echo "      <!-- Off-Page Content -->\n"; 
echo "      <!-- Mobile Navigation (Left Panel) -->\n"; 
echo "      <!-- Preloader -->\n"; 
echo "      <div class=\"introLoading\"></div>\n"; 
echo "      <!-- Back to Top -->\n"; 
echo "      <div>\n"; 
echo "          <a class=\"back-to-top fa fa-chevron-up\" href=\"javacript:void(0);\"></a>\n"; 
echo "      </div>\n"; 
echo "      <!-- Modal Content -->\n"; 
echo "      <div class=\"remodal-bg\">\n"; 
echo "          <!-- Item One -->\n"; 
echo "          <div class=\"remodal modal-beers\" data-remodal-id=\"bottle-$id\">\n"; 
echo "              <button data-remodal-action=\"close\" class=\"remodal-close\"></button>\n"; 
echo "              <div class=\"row\">\n"; 
echo "                  <div class=\"col-md-5 col-sm-12 col-xs-12\">\n"; 
echo "                      <div class=\"item-modal-image\">\n"; 
echo "                          <a class=\"image-lightbox\" href=\"admin/images/drinks/$image\"><img alt=\"\" src=\"admin/images/drinks/$image\" /></a>\n"; 
echo "                      </div>\n"; 
echo "                  </div>\n"; 
echo "                  <div class=\"col-md-7 col-sm-12 col-xs-12\">\n"; 
echo "                      <h3>$title</h3>\n"; 
echo "                      <p>$desc</p>\n"; 
echo "                      <table class=\"table\">\n"; 
echo "                          <tbody>\n"; 
echo "                              <tr>\n"; 
echo "                                  <td>Price:</td>\n"; 
echo "                                  <td>£$price</td>\n"; 
echo "                              </tr>\n"; 
echo "                              <tr>\n"; 
echo "                                  <td>Quantity:</td>\n"; 
echo "                                  <td>$qty</td>\n"; 
echo "                              </tr>\n"; 
echo "                          </tbody>\n"; 
echo "                      </table>\n"; 
echo "                  </div>\n"; 
echo "              </div>\n"; 
echo "          </div>\n"; 
echo "      </div>  \n"; 
echo "\n"; 
echo "    <!--==========================\n"; 
echo "  Price Menu end\n"; 
echo "============================-->\n";

}

}

Answer 1

将所有的html从echos中取出，然后将PHP插入到您的html中。首先，您需要识别需要循环的html区域，例如，如果我的原始html是这样的：

<div class="row">
    <div class="col-xs-12 col-sm-4">
        Box 1
    </div>
    <div class="col-xs-12 col-sm-4">
        Box 2
    </div>
    <div class="col-xs-12 col-sm-4">
        Box 3
    </div>
</div>

但是我想动态地生成这3个框，我的PHP应该是这样的，您可以将它封装在一个函数中：

<?php
function outputStuff(){

    $contents = array("Box 1","Box 2","Box3");
?>

    <div class="row">

    <?php foreach($contents as $value):?>

        <div class="col-xs-12 col-sm-4">

            <?php echo $value; ?>

        </div>

    <?php endforeach;?>

    </div>

<?php 
} // end the function 
?>

row必须在循环之外，否则将为每个项创建它，并清除列上的浮动。使用这些基本原则，你就会得到你想要的。

Answer 2

我知道你在使用引导，我建议你使用这种结构。

看一下这一页

<div class="container">
    <div class="row">
        <span class="col-lg-3 col-sm-12 picture">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>

        <span class="col-lg-3 col-sm-12">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>

        <span class="col-lg-3 col-sm-12">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>

        <span class="col-lg-3 col-sm-12">
            <img class="img-thumbnail" src="//placehold.it/200x200">   
        </span>
    </div></div>