0

所以，我有一个 div，里面有 3 个东西；1. 一张图片（左大引号） 2. 实时文本段落 3. 末尾的另一张图片（右大引号）。

第一张图片，当它放在 div 中时，会导致文本换行，这很棒。它似乎是该段落的一部分。

我的问题：我无法将第二张图片放在最后的段落“内部”。它被推到段落区域下方。我希望它用我的段落文本“换行”。

#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

我不确定您想要段落中的第二张图片是什么意思，但我知道使用 css 将您的第二张图片重新定位到您想要的位置的一种非常简单且便宜的方法......首先在您的图片上放一个 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 回答