17

我想放置 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>

4

2 回答 2

34

只需像这样使用一些包装器 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示例

于 2012-02-21T03:28:28.540 回答
5

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

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

  2. 图像不需要包装<p>；样式可以应用于<img>自身。

  3. 听起来你真正想要的是两个不同的内容块，每个都有一个图像和一些文本。我建议将图像放在<p>元素内 - 它是内联的，并且<p>'s 是块。首先放置图像，然后将其浮动到左侧，就像您尝试过的那样。那应该达到你所追求的。

于 2012-02-21T03:26:29.727 回答