Html 如何在同一行上显示左侧图像和右侧段落
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18895448/
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 display image on left and paragraph on right on the same line
提问by 001221
I want to do inline html styling, I want an image to float left and the paragraph on the right side by side on the same line, however I'm not getting the desired result with the code below:
我想做内联 html 样式，我希望图像向左浮动，右侧的段落并排在同一行上，但是使用以下代码我没有得到所需的结果：
My code is below or please view a jsFiddle
我的代码在下面或请查看jsFiddle
index.html
索引.html
<div class="newWrapper">
<div class="person1" style="float:left; display:inline-block; ">
<img src=simonwilliams.jpg width="auto" height"auto" clear:both;/>
<p style="float:right; display:block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu mauris, ullamcorper et ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar lacus.</p>
</div>
<div class="person2" style="float:left" display:inline-block;>
<img src=simonwilliams.jpg width="auto" height"auto"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu mauris, ullamcorper et ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar lacus.</p>
</div>
</div>
采纳答案by Prats
Add a span and make it float:leftand also add the span for the <p>tag and make it float:right. At the same time if you want to do for the below divyou can do the same.
添加一个跨度并制作它，float:left并为<p>标签添加跨度并制作它float:right。同时，如果您想为以下div内容做同样的事情。
<div class="person1" style="float:left; display:inline-block; ">
<span style="float:left;width: 20%;">
<img src="http://www.ninahale.com/wp-content/uploads/2013/08/Google.jpg"
width="70" height"70" />
</span>
<span style="float:right;width: 80%;">
<p style="float:right; display:block;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer arcu mauris, ullamcorper et
ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar
lacus.
</p>
</span>
</div>
回答by Tcharl
What about a table and two TDs?
一张桌子和两个 TD 怎么样？
<div>
<table>
<td><img src=simonwilliams.jpg width="auto" height"auto" clear:both;/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu mauris, ullamcorper et ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar lacus.
</td>
<td>
<img src=simonwilliams.jpg width="auto" height"auto" clear:both;/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu mauris, ullamcorper et ligula vitae, hendrerit sodales
tellus. Maecenas quis pulvinar lacus.
</td>
</table>
</div>
