如何在图片旁边放置文字? [英] How to place a text next to the picture?

问题描述

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

如何做到这一点?

我按如下格式格式化我的图片，但问题是图片就像他们假设的那样，但文本似乎只有第一张图片.

<p style="float: left; clear: left"><img src="image.jpg" height="200px" width="200px" border="1px"><<;/p><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p><p style="float: left; clear: left"><img src="image.jpg" height="200" width="200" border="1px"></p><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>

解决方案

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

<p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" border="1px"></p><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<div style="clear: left;"><p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200" width="200" border="1px"></p><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>

jsFiddle 示例

I want to place 2 pictures, one on top of the page and the other right below it. Then, I want to write something about each picture and I want the text to be located to the right of each picture.

How can this be done?

I am formatting my pictures as following, but the problem is that the pictures are like they were suppose to, but the text appear to be only by first image.

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

解决方案

Just use some wrapper divs like this:

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

这篇关于如何在图片旁边放置文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！