Изображение выходит за границы контейнера div

Может ли кто-нибудь взглянуть на следующую скрипту: http://jsfiddle.net/R4bCy/1/

Я думал, что div должен отрегулировать его высоту, чтобы разместить его элементы, если элементы не расположены абсолютно.

Почему div не расширяется до полной высоты изображения?

Мне нужно, чтобы изображение было выровнено вправо. Единственные способы, которыми я знаю, как это сделать: align='right', position:absolute; right: 0; и float:right, все из которых делают содержащийся div не отрегулировать его высоту до высоты изображения.

Ответ 1

.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
.img{
float:right;
height:auto;
}

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>

DEMO

Ответ 2

'Почему div не расширяется до полной высоты изображения?'

Поскольку поплавки будут перекрываться с блоками, только контексты форматирования блоков содержат поплавки. (Здесь вы можете найти довольно хороший обзор всей темы: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/)

Чтобы решить проблему:

align=right фактически приведет к тому, что img будет float: right (атрибут align устарел и css должен использоваться).

Чтобы содержать плавающее изображение в родительском div, вам нужно либо родительский div установить контекст форматирования блока (контексты форматирования блоков заключить вложенные поплавки), либо явно очистить поплавок с дополнительным элементом после img который обозначается как clear: right.

Простое решение для создания контекста форматирования блоков состоит в том, чтобы плавать родительский div, хотя моим предпочтительным решением в этом случае было бы просто установить его overflow на hidden (также приводящее к форматированию блока контекст).

Ознакомьтесь с обновленным скриптом http://jsfiddle.net/R4bCy/8/.

Ответ 3

Что вам нужно сделать, это добавить после тега p,

<div style="clear:both;"></div>

Ответ 4

Отправлено, извинился, и вы отредактировали свой вопрос - выравнивающее право плавает, я полагаю (вместо этого вы должны использовать float: right и clearfix).

example: http://jsfiddle.net/R4bCy/5/

Ответ 5

Вот что я считаю нужным: http://jsfiddle.net/R4bCy/6/

Если вы хотите, чтобы текст слева, а изображение перемещалось вправо, сделайте это, это ваш CSS: http://jsfiddle.net/R4bCy/15/

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