Html 如何在图片旁边放置文字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9371669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place a text next to the picture?
提问by HelpNeeder
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.
我想放置 2 张图片，一张在页面顶部，另一张在页面下方。然后，我想写一些关于每张图片的内容，并且我希望文本位于每张图片的右侧。
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>
回答by j08691
Just use some wrapper divs like this:
只需使用一些像这样的包装 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>
jsFiddleexample
jsFiddle示例
回答by chipcullen
A couple things may help:
一些事情可能会有所帮助：
Your styles don't need to be inline, but I'm assuming you're putting them there for brevity's sake.
The images don't need the wrapping
<p>; the styles can be applied to the<img>itself.It sounds like what you really want is two distinct chunks of content, each with an image and some text. I'd suggest placing the image inside of the
<p>element - it's inline, and<p>'s are block. Put the image first, and then float it to the left, as you've tried. That should achieve what you're after.
您的样式不需要内联，但我假设您是为了简洁起见将它们放在那里。
图像不需要包装
<p>；样式可以应用于<img>自身。听起来您真正想要的是两个不同的内容块，每个块都有一个图像和一些文本。我建议将图像放在
<p>元素内 - 它是内联的，并且<p>'s 是块。先放图像，然后像您尝试的那样将其浮动到左侧。那应该可以达到你所追求的目的。
