在w3行填充中循环w3-quarter

Question

这就是在w3响应式布局的w3行填充的while循环中循环php时的问题。布局中断

​

这是源代码

    <?php 
$r=0;
 while($r<ceil($fetch_row_count/4)) 

              { ?>
      <div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">
          <?php 

          while($row=mysqli_fetch_array($res)) 

              {

         ?>
        <div class="w3-quarter">
            <img src="admin/uploads/<?php echo $row['image']; ?>" alt="noodles" style="width:50%">
          <h3><?php echo $row['title']; ?></h3>
          <p><?php echo $row['description']; ?> </p>
        </div>

        <?php






              }
              $r++;
              }
              ?>

      </div>

感谢您提前回复和评论

Answer 1

没有为每个填充的容器添加底部div。

在编写代码的方式中，您添加了一个填充容器，然后为每个结果集添加w3-quarter div，然后重复多次，在我看来，每个结果集都包含相同的数据集。

您可能正在尝试完成的只是创建一个填充的div，然后在其中回显包含w3-quarter div的结果集。

这是你的原始方式，修改了底部的div：

<?php 

$r=0;
while($r<ceil($fetch_row_count/4)) {

  echo        
  '<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">';

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

    echo      
    '<div class="w3-quarter">' .
    '<img src="admin/uploads/' . $row['image'] . '" alt="noodles" style="width:50%">' .
    '<h3>' . $row['title'] . '</h3>' .
    '<p>' . $row['description'] . '</p>' .
    '</div>';

    }

  $r++;

  echo
  '</div>';

}          

?>

这是我认为你正在尝试做的方式：(只是猜测)

    <?php 

  echo        
  '<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">';

    $r = 0;    
    while($row=mysqli_fetch_array($res)){

      echo      
      '<div class="w3-quarter">' .
      '<img src="admin/uploads/' . $row['image'] . '" alt="noodles" style="width:50%">' .
      '<h3>' . $row['title'] . '</h3>' .
      '<p>' . $row['description'] . '</p>' .
      '</div>';

      $r++;
      //I would not actually try to control how many results you add like this.
      //I would get the results from a better formatted query.
      if($r < ceil($fetch_row_count/4)){

      break;

      }

    }

  echo
  '</div>';

?>