php - 在网格类型而不是列表中对齐产品？

Question

我在以网格类型显示产品时遇到问题。所有产品都以从上到下的格式排列在左侧，而不是网格类型。

我有一个名为 content 的 div，它在左侧显示产品列表，在右侧显示购物车元素。商品展示代码:

     <div id="content">
        <h2>Spices</h2>               
        <?php    
        $query="SELECT * FROM products";
        $result= mysqli_query($db,$query);
        while($row=mysqli_fetch_array($result))
        {
         $productname=$row['name'];
         $price=$row['price'];                
        ?>

            <div class="product1">

            <h3><?php echo $productname; ?></h3>
            <img src="images/bp.png" width="170" height="140">
            <p>Starting from <span> Rs. <?php echo $price; ?> </span></p>
            <div id="imgad">
                <a href="#"><img src="images/add-to-cart.png"></a>
            </div>
         <?php   } ?>

        </div>
       </div>
       <?php require_once("sidebar.php");

CSS

#content
{
    width: 700px;
    height: 1200px;
    padding: 5px;
    float: left;
    border: 1px solid #987a7a;

}

#sidebar
{
    width: 250px; 
    height: 500px;
    padding: 5px;
    float: right;
    border: 1px solid #987a7a;
}

 .product1
{
    width: 210px;
    height: 300px;
    border: 1px solid #c9c5c5; 
    text-align: center;
    float: left;
    display: block;  
}

当前一期(全部从上到下左对齐)

预期结果:

Answer 1

 .product1
{
    width: 210px;
    height: 300px;
    border: 1px solid #c9c5c5; 
    text-align: center;
    display: inline-block;  
}

display:inline-block 在行中显示内容

更新:

观看演示页面后DEMO我可以说问题是你的 div 没有正确关闭