如何在图片旁边放置文字？

Question

我想放置2张图片,一张放在页面顶部,另一张放在页面下面.然后,我想写一些关于每张图片的内容,我希望文本位于每张图片的右侧.

如何才能做到这一点？

我正在格式化我的图片如下,但问题是图片就像他们想象的那样,但文本看起来只是第一张图片.

<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>

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例子

Answer 2

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

1. 你的风格不需要内联,但我假设你是为了简洁而把它们放在那里.

2. 图像不需要包装<p>; 风格可以应用于<img>自身.

3. 听起来你真正想要的是两个不同的内容块,每个内容都有一个图像和一些文本.我建议将图像放在<p>元素内部- 它是内联的,而且<p>是块.将图像放在第一位,然后将其浮动到左侧,就像您尝试过的那样.这应该实现你所追求的目标.