Как отобразить изображение слева и параграф справа на одной строке

Я хочу сделать встроенный 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>
Источник

2 ответа

Решение

Добавьте диапазон и сделайте это 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>

демонстрация

Источник

А как насчет стола и двух ТД?

   <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>
Источник
Другие вопросы по тегам