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

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

1 голос
/ 05 февраля 2010

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

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

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

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

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

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

Ответы [ 6 ]

3 голосов
/ 05 февраля 2010

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

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

0 голосов
/ 05 февраля 2010

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

img#my_element {display:block;}
0 голосов
/ 05 февраля 2010

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

0 голосов
/ 05 февраля 2010

Здесь может происходить множество вещей. Когда я помещаю ваш код в теги 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, скорее всего, не решит вашу проблему. Я проверил это, чтобы быть уверенным в себе, и это не дало желаемых результатов.

0 голосов
/ 05 февраля 2010

Сбой вызывает float: left требует ширины экспликации

0 голосов
/ 05 февраля 2010

Также поместите div-элемент оборачивания влево, и содержимое будет правильно упаковано: 

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...