如何在同一行上显示左侧的图像和右侧的段落答案

【问题标题】：how to display image on left and paragraph on right on the same line如何在同一行上显示左侧的图像和右侧的段落
【发布时间】：2015-04-21 19:22:42
【问题描述】：

我想做内联 html 样式，我希望图像向左浮动，右侧的段落并排在同一行上，但是使用下面的代码我没有得到想要的结果：

我的代码如下或请查看jsFiddle

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

【问题讨论】：

标签： html inline-code

【解决方案1】：

添加一个跨度并将其设为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>

Demo

【讨论】：

【解决方案2】：

一张桌子和两个 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>

【讨论】：

我可以在表格中实现这一点，但我不想在表格中实现这一点