2015-03-13 29 views
0

这是我的问题: 如果我使用standart图片和描述(如图1) - 我有良好的网站外观。但是,当我使用数据库中的数据时,块目录向左下移(图2)。 的代码是在两种情况下是相同的,但外观是非常不同的块与商品“掉落”下单位类别

#wrapper { 
margin-top:40px; 
width: 1200px; 
margin: 0 auto; 
height: auto !important; 
} 
#category 
{ 
padding:10px 10px 10px 20px; 
border-left: 1px solid #d9d9d9; 
border-right: 1px solid #d9d9d9; 
border-bottom: 1px solid #d9d9d9; 
width:200px; 
clear:both; 
display:block; 
} 

#category ul li{ 
word-wrap: break-word; 
list-style-image: url(/neoshop/images/check.png); 
padding:10px 0px 10px 10px; 
border-bottom:1px dotted #cccccc; 
} 
#category ul li:last-child{ 
border-bottom:0px dotted #cccccc; 
} 

#category ul li a{ 
font:15px/1.3 "Arial", Arial,Helvetica, sans-serif; 
margin-top:0px; 
font-weight:100; 
display:block; 
color:#2f3638; 
text-decoration:none; 
line-height:20px; 

} 

#category ul li a:hover{ 

color:#0bb1e8; 
} 

#category ul ul a{ 

list-style-image:none; 
color:#8b8b8b; 
background:#fff; 
} 

#category ul ul{ 
margin-top:5px; 
display:none; 
color:#8b8b8b; 
background:#fff; 
} 

#category ul ul li{ 
word-wrap: break-word; 
list-style-image: none; 
padding:10px 0px 10px 10px; 
border-bottom:1px dotted #cccccc; 
} 

.catalog 
{ 
margin-left:12px; 
float:left; 
width:948px; 

} 

.product-main 
{ 
    width:236px; 
    height:285px; 
    float:left; 
} 

.product{ 
border-right:1px dotted #cccccc; 
padding:0 15px; 
} 
    .product h2{ 
    color:#111017; 
    text-align:center; 
    font:bold 14px/1.3 Tahoma; 
    margin:0 0 15px 0; 
    } 
    .product h3{ 
    color:#111017; 

    text-align:center; 
    font:bold 12px/1.3 Tahoma; 
    margin:0 0 15px 0; 
    } 
    .product-img{ 

    text-align:center; 
    } 

    .product-img img{ 
    weight:114px; 
    height:112px; 
    } 

    .price{ 
    font:13px/1.3 "Arial", Arial,Helvetica, sans-serif; 
    color:#0bb1e8; 


    } 

     .price span{ 
     font:13px/1.3 "Arial", Arial,Helvetica, sans-serif; 
     color:#111017; 
     text-align:center; 

     } 

     .price a{ 
     clear:both; 
     float:right;  
     } 
    .bot-dot 
    { 
    border-bottom:1px dotted #cccccc; 
    margin:20px; 
    } 

.product-main:nth-child(4n) .product 
{ 
border-right:none; 
} 
.product-main:last-child .product 
{ 
border-right:none; 
} 
.product-main:nth-child(4n) .bot-dot 
{ 
margin: 20px 0 20px 20px; 
} 
.product-main:nth-child(4n+1) .bot-dot 
{ 
margin: 20px 20px 20px 0px; 
} 

它必须是这样的:

enter image description here

但我有这样的: enter image description here

+0

也请张贴HTML ...我无法弄清楚什么是目录和产品等 – gaurav5430 2015-03-13 17:21:30

回答

0

时实际图像正在加载,

您的总宽度r目录增加了超过948px,因此它必须移动到下一行。

.product-img img{ 
    weight:114px; 
    height:112px; 
    } 

,而不是width

您错误地指定weight

+0

我已经改变,但外观仍然保持不变。我无法理解问题出在哪里...... – Shevko 2015-03-13 11:53:31

+0

你检查过渲染的css,比如说chrome inspect元素吗? 此外,更改宽度后,您的实际页面占位符图像仍然正确渲染? – gaurav5430 2015-03-13 17:19:47