0

図に示すように、テキストを含む画像を作成しました。

<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 を使用してそれを行う方法...plz ヘルプ

ここに画像の説明を入力 position と right=0 を削除した後

4

1 に答える 1

2

あなたは絶対に製品イメージを配置しています。これにより、ドキュメントの通常の「フロー」から外れ、このオーバーラップが発生します。

から削除position: absoluteし.productimgます（先に進んで削除することもできますright:0px;）。テキストは画像を適切に折り返す必要があります。テキストを画像の周りに浮かせるには、前に移動するか.productname、浮かせ.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;
}
于 2013-02-04T19:17:49.740 に答える