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 做到这一点...请帮助

删除位置和 right=0 后

Answer 1

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

从 .productimg 中删除 position: absolute(您也可以继续删除 right:0px;)，文本应该正确环绕图像。要允许文本在图像周围 float ，您可以将其移动到 .productname 之前或 float .productname 并为其指定宽度。

codepen

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;
}