通过使用 Foreach 循环获取数据创建三列产品网格

Question

我需要帮助和理解，因为我试图用从数据库中获取的产品数据填充每个 DIV 列。我每行最多需要三列，并且行和列的数量与产品一样多。

示例：如果数据库中有3个产品，则生成1行3列。如果数据库中有十个产品，将生成四行，其中三行将是完整的（每行三列），最后（第四行）将有一列 - 依此类推。

我需要 foreach loop 从数据库中获取每个选项的数据（产品名称、产品价格、描述等）并填充它。

为此，我使用 HTML 和 CSS（使用媒体查询）创建了一个三列网格。

* {
      box-sizing: border-box;
    }
    
    .product-columns {
      float: left;
      width: 33.3%;
      padding: 8px;
    }
    
    .product-price {
      list-style-type: none;
      border: 1px solid #eee;
      margin: 0;
      padding: 0;
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }
    
    .product-price:hover {
      box-shadow: 0 10px 15px 0 rgba(0,0,0,0.2)
    }
    
    .product-price .product-name {
      background-color: #111;
      color: white;
      font-size: 25px;
    }
    
    .product-price li {
      border-bottom: 1px solid #eee;
      padding: 20px;
      text-align: center;
    }
    
    .product-price .product-grey {
      background-color: #eee;
      font-size: 20px;
    }
    
    .buy-now-button {
      background-color: #333333;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 18px;
    }
    
    .buy-now-button:hover {
      background-color: #000000;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
    }
    
    @media only screen and (max-width: 600px) {
      .product-columns {
        width: 100%;
      }
    }

<div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product One</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">RRP: €11.99</li>
        <li>Seller: John Doe</li>
        <li>Ext. Delivery: 3-7 days</li>
        <li>Ext. Delivery Cost: €4.99 to €9.99</li>
        <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>
    
    <div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product Two</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">RRP: €11.99</li>
        <li>Seller: John Doe</li>
        <li>Ext. Delivery: 3-7 days</li>
        <li>Ext. Delivery Cost: €4.99 to €9.99</li>
        <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>
    
    <div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product Three</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">RRP: €11.99</li>
        <li>Seller: John Doe</li>
        <li>Ext. Delivery: 3-7 days</li>
        <li>Ext. Delivery Cost: €4.99 to €9.99</li>
        <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>

这是PHP，我一点也不确定。这是我试图更好地理解的部分 - 这是我需要帮助的部分。

PHP代码，使用foreach循环：

<?php  foreach ($products as $key => $prod) { ?>

<!-- wrap the loop begin -->
<div class="product-wrapper">

<!-- DIV loop -->
<div class="product-columns">
  <ul class="product-price">
    <li class="product-name"><?php echo $prod['name'] ?></li>
    <li class="product-grey">Price: <?php echo $prod['price'] ?></li>
    <li class="product-grey">Sale Price: <?php echo $prod['sale_price'] ?></li>
    <li class="product-grey">RRP: <?php echo $prod['product_rrp'] ?></li>
    <li>Seller: <?php echo $prod['seller_nickname'] ?></li>
    <li>Ext. Delivery: <?php echo $prod['delivery_time'] ?></li>
    <li>Ext. Delivery Cost: <?php echo $prod['del_cost_from'] ?> to <?php echo $prod['del_cost_to'] ?></li>
    <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
  </ul>
</div>
<!-- DIV loop ends -->

<!-- wrap the loop end -->
</div>

<?php endforeach; } ?>

我已经从 SO 上的其他问题中获得了帮助，因为我正在尽我所能地学习。现在，我不确定这是正确的还是错误的方法？我这样做对吗？

如有任何建议，我们将不胜感激。

Answer 1

如果您想展示三种产品，可以使用弹性框来实现。

.product-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.product-holders {
  margin: 0px 1%;
  width: 30%;
  height: 30%;
  min-height: 30px;
  min-width: 30px;
  background: red;
  flex: 0 0 30%;
  /*or use flex-besis : 30% */
}


/*product card styles */
.card {
  width: 300px;
  height: 440px;
  border-radius: 5px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
.card > *:not(img) {
  padding: 5px 10px;
}

.card img {
  width: 100%;
  height: 180px;
}

.card-body {
  padding: 5px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.card-body p {
  color: #3d3d3d;
  margin-bottom: 20px;
  font-size: 14px;
}

.view-btn a {
  padding: 5px 15px;
  border: 1.5px solid #007bff;
  border-radius: 3px;
  text-decoration: none;
  color: #007bff;
}

.btn-group {
  display: flex;
}

.btn-group .btn a {
  padding: 5px 15px;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  margin-left: -2px;
}
.btn-group a {
  margin: 0 10px;
  text-decoration: none;
  color: #000;
}

<!-- container will be outside of you loop-->
<div class="product-container">
<!-- put one div in the loop-->
<!-- <?php  foreach ($products as $key => $prod) { ?> -->
  <div class="product-holders">
    <div class="card">
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXMlMjBuaWtlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="" />
    <div class="card-body">
      <div class="row">
        <div class="card-title">
          <h4>Nike Sneaker 
         <!-- <?php echo $prod['name'] ?> -->
          </h4>
          <h3>0
         <!--  <?php echo $prod['price'] ?> -->
          </h3>
        </div>
        <div class="view-btn">
          <a href="">View Details</a>
        </div>
      </div>
      <hr />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
        dignissimos.
      </p>
      <div class="btn-group">
        <div class="btn">
          <a href="">Buy Now</a>
        </div>
        <a href=""> Cancel</a>
      </div>
    </div>
  </div>
  </div>
 <!-- <?php   } ?> -->
</div>

Answer 2

不是将 $thirdcoulmn 变量作为布尔值，而是存储模值，这将帮助您使用 class="product-column"

打开和关闭 div

<div class="product-wrapper">
    <?php
    // I assume loop runs with in product wrapper
    $i = 0;
    foreach ($products as $key => $prod) {
        ?>
        <!-- wrap the loop begin -->
        <!-- DIV loop -->
        <?php
        if ($i % 3 == 0) { //Opening the loop
            ?>
            <div class="product-columns">
                <?php
            }
            ?>
            <ul class="product-price">
                <li class="product-name"><?php echo $prod['name'] ?></li>
                <li class="product-grey">Price: <?php echo $prod['price'] ?></li>
                <li class="product-grey">Sale Price: <?php echo $prod['sale_price'] ?></li>
                <li class="product-grey">RRP: <?php echo $prod['product_rrp'] ?></li>
                <li>Seller: <?php echo $prod['seller_nickname'] ?></li>
                <li>Ext. Delivery: <?php echo $prod['delivery_time'] ?></li>
                <li>Ext. Delivery Cost: <?php echo $prod['del_cost_from'] ?> to <?php echo $prod['del_cost_to'] ?></li>
                <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
            </ul>
            <?php
            if ($i % 3 == 2) { //This is closing div after every three products
                ?>   
            </div>
            <?php
        }
        $i++;
    }
    ?>
    <!-- DIV loop ends -->
    <?php
    if ($i % 3 < 2) {  //Important..!! This is closing div if last row has less than three products
        ?>   
    </div>
    <?php
}
?>
<!-- wrap the loop end -->
</div>

通过使用 Foreach 循环获取数据创建三列产品网格

Creating a Three Columned Product Grid by Getting Data using Foreach Loop

html

css

php

foreach