如何将文本放在图片旁边？

Question

我想要在页面上方放置两张图片，另一张图片则在其正下方。然后，我想要为每张图片编写相应的文字，并且希望文字位于每张图片的右侧。

如何实现这个效果？

我按照以下方式格式化我的图片，但问题是图片看起来正确，但文本只显示在第一张图片旁边。

<p style="float: left; clear: left"><img src="image.jpg" height="200px" width="200px" 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" height="200" width="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>

- HelpNeeder

---

谷歌有很多示例。 - Frederick Marcoux

Answer 1

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

<div>
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" 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" height="200" width="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示例

- j08691

---

我猜我必须使用div元素。我一直在尝试避免使用它们和换行符。 - HelpNeeder

Answer 2

一些小建议：

1. 你的样式不需要内联，但我假设你是为了简洁而这么做的。

2. 图片不需要包裹在 <p> 标签中；样式可以直接应用于 <img> 元素本身。

3. 听起来你真正想要的是两个不同的内容块，每个块都有一张图片和一些文字。我建议将图片放在 <p> 元素内部——它是内联元素，而 <p> 是块级元素。把图片放在第一位，然后向左浮动，就能实现你想要的效果。

- chipcullen