html - CSS保护文本与图像的重叠

Question

我创建了一个带有一些文本的图像，如图所示。

<span class="productname ">Excusite Beauty</span>
<img src="xy.jpg" data-attr="productimg" class="productimg " />

我的CSS是

.productimg
{
float:right;
margin-top:15px;
height:120px;
margin-right:2%;
border:2px double  #0ff;
width:150px;
right:0px;
position:absolute;
}
.productname
{
font-size:1.2em;
display:block;
float:left;
}

如果文本很长，我如何保护文本的重叠并将文本放在下一行。如何使用 css...请帮助

删除位置和右=0后

Answer 1

您绝对是在定位产品形象。这会使其脱离文档的正常“流程”，并会导致这种重叠。

Remove position: absolutefrom .productimg(you can go ahead and remove right:0px;as well)，文本应该正确环绕图像。要允许文本在图像周围浮动，您可以将其移动到之前.productname或浮动.productname并给它一个宽度。

密码笔

HTML

<div class="product">
  <img src="xy.jpg" data-attr="productimg" class="productimg " />
  <span class="productname ">Excusite Beauty</span>
</div>

CSS

.productimg {
  float:right;
  /* margin-top:15px; */
  height:120px;
  border:2px double  #0ff;
  width:150px;
}
.productname {
  font-size:1.2em;
  display:block;
   width:150px
}
.product {
  width:300px;
}