Выравнивать изображение вправо от текста в div

Question

Я уверен, что это простой вопрос, но я не могу понять это. У меня есть этот код в основном

<div> 
<img /> 
<p></p> 
</div> 
<div> 
<img /> 
<p></p> 
</div> 

Я хочу, чтобы изображение для выравнивания справа от текста внутри дел. Все, что я пробовал до сих пор, выводит изображение из обычного потока страниц, делая div не уважающим высоту изображения. Я не могу просто указать высоту div, потому что внутри изображение динамическое и только заданная ширина.

Вот как выглядит страница.

Как выровнять изображение справа от DIV и до сих пор Дива уважение высоты изображения.

Answer 1

В css задано переполнение div, которое должно учитывать высоту изображения для авто.

div { 
 
    overflow: auto; 
 
}

Answer 2

В основном ваш DIV должен иметь overflow:hidden, посмотрите пример:

<div style="overflow:hidden"> 
    <img style="float:right; width:100px; height:100px"/> 
    <div>text text text text text text text text</div> 
</div> 
<div style="overflow:hidden"> 
    <img style="float:right; width:100px; height:100px"/> 
    <div>text text text text text text text text</div> 
</div> 

В качестве альтернативы вы можете поместить <div style="clear:both"></div> после каждого div

Answer 3

Это происходит потому, что в обращении на образ. Для того, чтобы исправить это, вы можете использовать метод, называемый clearfix на элемент контейнера: div.infobox

.infoBox:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

скрипку here.