如何使用 PHP 以 box 樣式顯示 MySQL 查詢結果？

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

使用 css“浮動：左”

    $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>';
                                                   }

Answer 2

您可以使用引導程序來實現這一點。 例如，只需在 div 標簽內添加 class="col lg-4"，每行就會有 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>