如何在图片旁边放置文字？ [关闭]

Posted 2023-03-04

【中文标题】如何在图片旁边放置文字？ [关闭]

【英文标题】：How to place a text next to the picture? [closed]

【发布时间】：2012-03-11 09:58:40

【问题描述】：

我想放置 2 张图片，一张在页面顶部，另一张在页面下方。然后，我想为每张图片写一些东西，并且我希望文字位于每张图片的右侧。

如何做到这一点？

我将我的图片格式化如下，但问题是图片就像他们想象的那样，但文字似乎只是第一张图片。

<p style="float: left; clear: left"><img src="image.jpg"   border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p style="float: left; clear: left"><img src="image.jpg"   border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>

【问题讨论】：

谷歌有很多例子。

【参考方案1】：

只需像这样使用一些包装器 div：

<div>
    <p style="float: left;"><img src="http://placekitten.com/g/200/200"   border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div style="clear: left;">
    <p style="float: left;"><img src="http://placekitten.com/g/200/200"   border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>

jsFiddle示例

【讨论】：

我想我必须使用 div。我试图避免它们和换行符。

【参考方案2】：

有几件事可能会有所帮助：

您的样式不需要内联，但为了简洁起见，我假设您将它们放在那里。

图片不需要包裹<p>；样式可以应用于<img> 本身。

听起来您真正想要的是两块不同的内容，每块都有一个图像和一些文本。我建议将图像放在<p> 元素内——它是内联的，而<p> 是块状的。首先放置图像，然后将其浮动到左侧，就像您尝试过的那样。那应该可以实现您的目标。