以网格类型而不是列表对齐产品？答案

【问题标题】：Align products in Grid type instead of list?以网格类型而不是列表对齐产品？
【发布时间】：2014-10-13 20:45:38
【问题描述】：

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

我有一个名为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;  
}

当前问题（全部从上到下左对齐）

预期结果：

【问题讨论】：

尝试使用display: inline-block; 而不是float:left;display:block。
@JJPA 是的。但结果是一样的。
你有floats，它们在你的css中发挥了很多作用。尝试使用正确的positioning 然后尝试:)
我实际上并不是positioning 和float 方面的专家。如果你能帮忙，我可能会解决。但是当我们在静态中给出日期时，它在 html 中效果很好。只有当我从数据库中获取数据时才会出现这种对齐问题。
我认为您还应该在浏览器的开发人员模式下获取期间检查更改 css

标签： php html mysql css

【解决方案1】：

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

display:inline-block 显示行内内容

更新：

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

【讨论】：

是的，我刚刚注意到并正在删除
我试过这段代码。但同样的结果。当我们在静态中给出日期时，它在 html 中运行良好。但是在从数据库中获取数据时，会出现这种对齐问题。
问题是没有正确关闭 div。感谢您的帮助:)

【解决方案2】：

使用display: inline-block，像这样：

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

喜欢这个jsfiddle。

【讨论】：