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

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>是块。按照你的想法先放置图像，然后将它浮到左边。这应该能够实现你的目标。