Question

我的产品列表页面有问题样式网格视图。我想要的是以每行显示四个产品并且每页最多三行的方式对其进行样式化。目前，我所拥有的是垂直显示的产品。有帮助吗？我的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)
}

Answer 2

关闭product-item div忘记关闭product-item 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 } ?>

并在overflow:hidden上应用#product-grid，宽度与float:left一样宽度，无需在.product-item上添加float：left，只需删除它

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

小提琴here

注意：我建议你使用product-item作为类而不是 id 总是使用class来表示同名的多个项目

感谢

Answer 3

感谢每一位回答我问题的人。它让我深入了解了解决问题的方法。我能够使用下面的代码

让我的网格工作

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;
}

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

3 个答案: