0

だから、私は div を持っており、その中には 3 つのものがあります。1. 画像 (大きな左引用符) 2. ライブ テキストの段落 3. 末尾の別の画像 (大きな右引用符)。

最初の画像を div に入れると、テキストが折り返されます。これは素晴らしいことです。段落の一部のようです。

私の問題: 最後の段落の「内側」にある 2 番目の画像を取得できません。段落領域の下に押し込まれます。段落テキストで「ラップ」したい。

#textarea {
width: 185px;
height: 70px;
padding: 49px;

}

#textarea p {
font-size: 15px;
font-weight: bold;
color: #4D6F79;
line-height: 230%;
text-align: center;
-webkit-margin-after: 0em;
-webkit-margin-before: 0em;

} 

<div id= "textarea">
            <img src="images/leftquote.png" width="36" height="43" alt="left quotation" align="left"/>
            <p>The kids really loved it!</p>
            <img src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/>
        </div>

どんな助け/アイデアも大歓迎です! ありがとう！！

4

1 に答える 1

0

段落に 2 番目の画像が必要な場合の意味が正確にはわかりませんが、css を使用して 2 番目の画像を必要な場所に再配置するかなり簡単で安価な方法を知っています...最初に画像に ID を付けます。

<img id='image2' src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/>

次に、CSS を使用して位置を変更します。

<style>
#image2 {
position:relative;
top:-50px; // These numbers are just examples you can change them to anything to properly reposition your text.
left:20px;
z-index:-1; //depending on whether you want your image infront or behind the text you can change your z-index to either a positive number e.g.(5) or negative number e.g.(-2).
}
</style>

異なるブラウザー間での異なるフォーマットについて心配している場合、この配置だけで大きく異なるようには見えませんが、オーバーフローを使用して画像の周りにテキストをラップしても問題ない場合は、これを行う別の方法があります。元：

 <div class='floating-eg'>
<p>The kids really loved it!</p>
        <img class='left' src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/>
</div>
<style>
.floating-eg {
    overflow: auto;
}
p {
    overflow: auto;
}
</style>

関連するラッピングの例をここで見ることができます。

于 2013-01-12T05:23:57.653 に答える