Html 如何在同一行上显示左边的图像和右边的段落

Html 如何在同一行上显示左边的图像和右边的段落,html,inline-code,Html,Inline Code,我想做内联html样式设计,我想让一个图像向左浮动,让右侧的段落并排在同一行上,但是我没有用下面的代码得到想要的结果: 我的代码在下面或请查看 index.html <div class="newWrapper"> <div class="person1" style="float:left; display:inline-block; "> <img src=simonwilliams.jpg width="auto" height"aut

我想做内联html样式设计,我想让一个图像向左浮动,让右侧的段落并排在同一行上,但是我没有用下面的代码得到想要的结果:

我的代码在下面或请查看

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>

Lorem ipsum dolor sit amet,Concetetur Adipsicing Elite。Integer arcu mauris、ullamcorper和ligula vitae、hendrerit sodales tellus。梅塞纳斯·奎斯·普尔文纳·拉库斯

Lorem ipsum dolor sit amet,是一位杰出的献身者。Integer arcu mauris、ullamcorper和ligula vitae、hendrerit sodales tellus。梅塞纳斯·奎斯·普尔文纳·拉库斯


一张桌子和两个TDs怎么样

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

Lorem ipsum dolor sit amet,是一位杰出的献身者。Integer arcu mauris、ullamcorper和ligula vitae、hendrerit sodales tellus。梅塞纳斯·奎斯·普尔文纳·拉库斯。
Lorem ipsum dolor sit amet,是一位杰出的献身者。Integer arcu mauris、ullamcorper和ligula vitae、hendrerit sodales
泰勒斯。梅塞纳斯·奎斯·普尔文纳·拉库斯。

添加span并使其
浮动:左
,还为
标记添加span并使其
浮动:右
。同时,如果您想为下面的
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>

Lorem ipsum dolor sit amet,
献祭精英。整数arcu mauris,ullamcorper等
生命之舌,亨德雷特苏打粉。普尔维纳大师
拉克斯。


我可以在表格中实现这一点,但我不希望在表格中实现这一点