CSS图像重叠在while循环

（此代码创建图像，产品名称和基本描述框）

<?php 
    while ($row = mysql_fetch_row($q3)) { 
    echo "<div class='ipsBox_containerdlc ipsPad'> 
<h3 class='ipsType_subtitledlc'>".$row[2]." </h3> 
<br> 
<p class='descdlc'>".$row[4]."</p> 
<p class='descdlcimg'> 
<img src='http://localhost/images/249273625.jpg' width='200' height='219'/> 
</p></div> 
"; 
    } 
?>

和CSS代码：

.descdlc { 
font-size: 12px; 
color: #777777; 
    position:relative; 
    left:375px; 
    width:375px; 
} 

.descdlcimg { 
font-size: 12px; 
color: #777777; 
    position:relative; 
    top:-143px; 
    left:100px; 
    overflow:hidden; 
} 

.ipsBox_containerdlc { 
    background: #fff; 
    border-left: 1px solid #CECED1; 
    border-right: 1px solid #CECED1; 
    border-bottom: 1px solid #CECED1; 
    border-top: 1px solid #CECED1; 
      height:240px; 
    }

问题是我的图像“重叠”，如果我使用while循环：

任何想法如何解决它？没有while循环一切看起来很好！

更新：

来源

2013-06-19 user2500227

'top：-143px;'对于每张图片肯定会将它们融合在一起 –

你定位.descdlcimgrelative与top: -143px。这意味着

“定位此图像比它应该在的位置高143px”。

我认为你的图像“融化”了这些143px到顶部。如果你没有足够的理由来进行这种相对定位（抬头：通常人们说position: relative当他们的意思是position: absolute），只要删除它，它应该工作。

来源

2013-06-19 08:30:02

谢谢先生，我改变了这一点，但图像仍然重叠。 – user2500227

也许和边缘底部。 – JonathanRomer

我已经从您提供的代码创建了[jsFiddle]（http://jsfiddle.net/U9gtZ/1/）。对我来说它有效（图像位置较高但不重叠）。如果我犯了什么错误，请更改它（我假设php代码产生了我在这里所做的）。是否有其他代码影响您的图像？（检查这与您的浏览器开发工具 - 右键单击>检查元素> css） –

尽量使您的缩进一致和整齐，将使代码更容易阅读和更容易找到错误。

我不确定，但在CSS/HTML中允许有空格的类名（和ID名称）吗？

试着把float: left;放入.descdlcimg。

来源

2013-06-19 08:56:32 Andrew

谢谢你，先生，不错的提示！我一定会用这个:) – user2500227

CSS图像重叠在while循环

回答

相关问题