css - 为什么 div 标签不能与 css 一起使用

Question

我在为我的产品列表页面设计 GridView 时遇到问题。我想要的是以每行显示四个产品并且每页最多三行的方式设置样式。目前，我拥有的是垂直显示的产品。有什么帮助吗？ 我的 product.php 代码是:

<?php
                $result=mysql_query("select * from products") or die("select * from products"."<br/><br/>".mysql_error());
                while($row=mysql_fetch_array($result)){
            ?>  
        <div id="product-grid"> 
        <div class="product-item">
                <div class="product-image"><img src="<?php echo $row['picture']?>" /></div>
               <div><strong><?php echo $row['name']?></strong></div>
                        <div class="product-description"><?php echo $row['description']?></div>
                        Price:
                            <div class="product-price">$<?php echo $row['price']?></div>
                        <div><input type="button" value="Add to Cart" onclick="addtocart(<?php echo $row['serial']?>)" /></div>

            <?php } ?>.

我的风格是这样的，但是效果不理想。

body{width:610px;}
#product-grid {border-top: #F08426 2px solid;margin-bottom:30px;}
#product-grid .txt-heading{background-color: #FFD0A6;}
.product-item { float:left; background:#F0F0F0; margin:15px;    padding:5px;}
.product-price {color:#F08426;}
.product-image {height:100px;background-color:#FFF;}

我们将不胜感激。

Answer 1

你可以使用 flex

结帐下面的演示

demo

#product-grid {
  display: flex;
  flex-wrap:wrap;
}
.product-item {
  display: inline-block;
  background: #ccc;
  margin:10px 0 0 10px;    
  width: calc(100% * (1/4) - 12px - 1px)
}