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

有些事情可能会有所帮助：

你的风格不需要内联，但为了简洁起见，我假设你把它们放在那里。
图片不需要包裹<p>;样式可以应用于<img>本身。
听起来你真正想要的是两个不同的内容块，每个内容都有一个图像和一些文本。我建议将图像放在<p>元素内 - 它是内联的，<p>是块。将图像放在第一位，然后将其浮动到左侧，就像您尝试过的那样。这应该实现你所追求的目标。

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

2 个答案: