Question

我有以下HTML代码：

（此代码创建包含图像，产品标题和基本描述的框）

<?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循环，一切看起来都很好！

更新

Answer 1

您将.descdlcimg relative与top: -143px放在一起。这意味着

“将此图像的位置设置为比应该位置高143px。”

我认为你的影像“融化”只是这些143px到顶部。如果你没有充分的理由进行这种相对定位（抬头：通常有人说position: relative，当他们的意思是position: absolute时），只需删除它就可以了。

Answer 2

尝试与缩进保持一致和整洁，使代码更容易阅读，更容易找到错误。

我不确定CSS / HTML中的类名（以及ID名称）是否允许包含空格？

尝试将float: left;放入.descdlcimg。

CSS图像在while循环中重叠

2 个答案: