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

我的产品列表页面有问题样式网格视图。我想要的是以这样一种方式来设计它：每行显示四种产品，每页最多显示三行。目前，我拥有的是垂直显示的产品。有什么帮助吗？ 我的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 } ?>.

任何帮助都将不胜感激。

您可以使用flex

下面是结帐演示

---

关闭

productitem

div您只是忘记关闭

productitem

div，这就是css无法工作的原因

<?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>
    </div> <!--here you forgot-->
</div>
<?php } ?>

拨弄

注意：我建议您将产品项目用作类而不是id始终将类用于具有相同名称的多个项目

---

谢谢

谢谢所有回答我问题的人。它让我洞察到如何解决这个问题。我能够使用下面的代码使我的网格工作

body {
font-family: "open san", verdana, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
width: 100%;}

.prod-box{
    width: 200px; height: 340px;
    padding: 10px; margin: 15px;
    background-color: #fff;
    float: left;
}

.prod-box img:first-child, .prod-box-list img:first-child{width: 190px; float: left;}
.prod-box h3 a{
    text-decoration: none;
    width:140px;
    float: left;
    margin: 5px 0;
    color:#888;
    font: italic normal 14px georgia;
    font-style: italic;
}
.prod-box p{ display: none;}

.prod-box .old{
    margin-right: 20px;
    color: #be0000 !important;
    text-decoration: line-through;
}
.prod-box .price{
    width: 60px;
    display: inline; 
    float: left;
    font: italic 13px georgia;
    color: #181818;
}
.prod-box .cart-ico{
    border-radius: 20px;
    width: 35px; height: 35px;
    float: right;
    margin: 5px;
    cursor: pointer;
}
.prod-box .cart-ico:hover{
    background-color: #7eb800;
}

<?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>
    </div> <!--here you forgot-->
</div>
<?php } ?>

#product-grid {
border-top: #F08426 2px solid;
margin-bottom: 30px;
overflow: hidden;
float: left;
width: 25%;
}

body {
font-family: "open san", verdana, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
width: 100%;}

.prod-box{
    width: 200px; height: 340px;
    padding: 10px; margin: 15px;
    background-color: #fff;
    float: left;
}

.prod-box img:first-child, .prod-box-list img:first-child{width: 190px; float: left;}
.prod-box h3 a{
    text-decoration: none;
    width:140px;
    float: left;
    margin: 5px 0;
    color:#888;
    font: italic normal 14px georgia;
    font-style: italic;
}
.prod-box p{ display: none;}

.prod-box .old{
    margin-right: 20px;
    color: #be0000 !important;
    text-decoration: line-through;
}
.prod-box .price{
    width: 60px;
    display: inline; 
    float: left;
    font: italic 13px georgia;
    color: #181818;
}
.prod-box .cart-ico{
    border-radius: 20px;
    width: 35px; height: 35px;
    float: right;
    margin: 5px;
    cursor: pointer;
}
.prod-box .cart-ico:hover{
    background-color: #7eb800;
}