Как показать результаты запроса MySQL, используя PHP в стиле box?

Question

Я настраиваю новый веб-сайт и хочу показать результаты поискового запроса MySQLi в полях.

Мой php-код ....

 $query = mysqli_query($con,"SELECT * FROM `products`");
   while($row = mysqli_fetch_array($query))    {
      echo "<img src='/Images/".$row['product_image']."' height='200' width='200'>"
      echo '<h6> Id:'.$row['product_id'].'</h6>';
      echo '<h6> Name:'.$row['product_name'].'</h6>';
      echo '<h6> Proce:'.$row['product_price'].'</h6>';
                                               }

При этомкодировать результаты поискового запроса представлены так:

Я пытаюсь использовать многие способы, чтобы добиться представления результатов, как этот способ:

Есть идеи или советы?Спасибо

Answer 1

вы можете использовать bootstrap для достижения этой цели.Например, просто добавьте class = "col lg-4" внутри тега div, и у вас будет 3 столбца для каждой строки.

Пример кода:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<section class="content">
  <div class="container">

    <div class="row">

      <?php
      $get = mysqli_query($con, "SELECT * FROM `products` ORDER BY `product_name`");
          
      while ($products = mysqli_fetch_assoc($get)) { ?>

        <div class="col-lg-4">
          <div class="thumbnail" align="center">
            <img src="admin/images/products/<?php echo $products['photo']; ?>" style="width: 220px; height: 150px">
            <div class="caption">
              <h4>
                <?php echo $products['product_name']; ?>
              </h4>
              <span>$<?php echo number_format($products['price']); ?></span>
              <br />
              <br />
              <a href="index.php?data=detail&i=<?php echo $products['id']; ?>" class="btn btn-primary">Detail</a> &nbsp;
              <input type="button" name="wishlist" id="add_wishlist" value="+ " onclick="addWishlist('<?php echo $products[id]; ?>', '<?php echo $id_user; ?>')" class="btn btn-info">
            </div>
          </div>
        </div>

        <?php } ?>

    </div>

  </div>
</section>

Answer 2

Используйте css "float: left"

    $query = mysqli_query($con,"SELECT * FROM `products`");
       while($row = mysqli_fetch_array($query))    {
          echo '<div style="float:left">';
          echo "<img src='/Images/".$row['product_image']."' height='200' width='200'>";
          echo '<h6> Id:'.$row['product_id'].'</h6>';
          echo '<h6> Name:'.$row['product_name'].'</h6>';
          echo '<h6> Proce:'.$row['product_price'].'</h6>';
          echo '</div>';
                                                   }