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循環

回答

相關問題