Question

所以，我有一个div，在里面我有三件事; 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>

非常感谢任何帮助/想法！谢谢！

Answer 1

我不完全确定你的意思是你想在你的段落中使用你的第二张图片，但我知道使用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>

您可以看到包装here的相关示例。

在div中，我有一个图像，然后是段落，然后是最后的图像。我无法将第二张图片放在段落的“内部”

1 个答案: