Плавающее изображение не учитывается в ширине DIV, как мне это сделать?

Следующий код:

<div>
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

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

То есть, если плавающее изображение имеет ширину 200 пикселей, «200 пикселей» текста в правом конце div будут перенесены на следующую строку. Как будто контейнер DIV не видит лишний текст и устанавливает слишком маленькую динамическую ширину div!

... что, как я понимаю, сделано по замыслу, просто потому, что изображение "плавает", а не является блочным/встроенным элементом. (По крайней мере, я думаю, что сформулировал это правильно...?)

Итак, как я могу добиться того, чего хочу, не прибегая к таблицам (ick...)?


html css css-float
person Julian H. Lam    schedule 05.02.2010    source источник

Ответы (6)


arrow_upward
3
arrow_downward

Плавающие элементы удаляются из потока страницы и не вызывают расширения окружающих элементов.

Посмотрите здесь. В этом руководстве рассказывается о заключении плавающих элементов с использованием свойства overflow.

person Vivin Paliath    schedule 05.02.2010
comment
Ржу не могу. Вау, я написал этот ответ 3 года назад, и он только что был принят. Хаха спасибо! - person Vivin Paliath; 09.04.2013

arrow_upward
0
arrow_downward

Переместите обертывающий div также влево, и он правильно обернет содержимое:

<div style="float: left;">
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

Это не идеальное решение, поскольку плавание контейнера div имеет очевидные побочные эффекты, но это верный способ убедиться, что div корректно оборачивает плавающий контент.

Если плавание div вызывает у вас какие-либо проблемы, вы можете обернуть его в другой div, который должен решить проблему.

person Chris Van Opstal    schedule 05.02.2010

arrow_upward
0
arrow_downward

Сбой вызывает float:left требует явной ширины

person ozsenegal    schedule 05.02.2010

arrow_upward
0
arrow_downward

Здесь может происходить ряд вещей. Когда я помещаю ваш код в теги body HTML-страницы без другого кода, он работает нормально. Это может быть связано с вашим определением типа страницы. Мой:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

Это также может быть связано с тем, что у вас есть содержимое, которое заставляет этот div становиться короче. Единственный способ убедиться, что вы решили проблему, - это заставить вашу область иметь определенную ширину, установив ее стиль ширины. Изменение тега Div, в котором находится ваш код, чтобы он имел стиль float:left, скорее всего, не решит вашу проблему. Я проверил это, чтобы убедиться, что это не дало желаемых результатов.

person Ben Hoffman    schedule 05.02.2010

arrow_upward
0
arrow_downward

Помимо плавания содержащего div, вы также можете добавить «ширина: 100%; переполнение: скрыто;» стиль для содержащего div. Это заставит его расшириться, чтобы содержать плавающий div. Подробнее см. здесь.

person technophile    schedule 05.02.2010

arrow_upward
0
arrow_downward

Вы также должны убедиться, что элемент отображается как блок:

img#my_element {display:block;}
person JP Silvashy    schedule 05.02.2010