将网格类型中的产品对齐而不是列表？

Question

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

我div名为content，显示左侧的产品列表和右侧的购物车项目。显示产品的代码：

     <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 show line in line

更新

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

Answer 2

使用display: inline-block，如下所示：

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

喜欢这个jsfiddle。