css с плавающей запятой/позиционированием

Итак, у меня есть небольшой div для границы и три div внутри (см. изображение в конце). Зеленый — полный размер (минус отступы и т. д.); Синий должен плавать влево и иметь определенную ширину; Красный должен плавать вправо, а также иметь определенную ширину. Однако я что-то путаю. И синий, и красный div плавают за пределами основного div. Что я здесь делаю неправильно?

Вот мой текущий код:

<div style="border: 2px solid black; width: 630px;">
  <div style="width:auto;">Lorem ipsum</div>
  <div style="width:150px; float:left;">This is the blue box</div>
  <div style="width:150px; float:right;">This is the red box</div>
</div>

http://www.mfrl.org/images/howtofloat.png


html css position css-float
person aslum    schedule 12.07.2010    source источник
comment
Какой браузер, как это, кажется, работает нормально для меня? Попробуйте также перенести стиль во внешнюю таблицу стилей. Сэкономит вам много душевной боли в долгосрочной перспективе :)   -  person RyanP13    schedule 12.07.2010
comment
Я не вижу их за пределами основного блока (Chrome и IE)   -  person onof    schedule 12.07.2010
comment
Теперь, когда я проверил, он работает в IE, но не в chrome или firefox для меня...   -  person aslum    schedule 12.07.2010
comment
Установите overflow:auto; во внешнем div. См. quirksmode.org/css/clearing.html.   -  person David Kolar    schedule 12.07.2010
comment
@RyanP: В конце концов я перенесу его на внешний SS, хотя я хочу сначала заставить работать основы.   -  person aslum    schedule 12.07.2010

Ответы (1)


arrow_upward
3
arrow_downward

Расположение поплавков забавное. По сути, основной элемент div не учитывает высоту плавающих элементов при определении собственной высоты. Самый простой способ решить эту проблему — добавить очищающий элемент после плавающих элементов.

Эта скрипка должна ясно объяснять себя: http://jsfiddle.net/QQxb3/2/

Я думаю, что люди, которые прокомментировали ваш пост, сказав, что он действительно работает, должно быть, неправильно поняли, что вы подразумеваете под «главным div», потому что спецификация, которой следует Chrome и IE в этом конкретном случае, поместит плавающие элементы за пределы его родительский раздел.

person Steven    schedule 12.07.2010
comment
Спасибо, это была именно проблема. - person aslum; 12.07.2010
comment
Не было бы необходимости использовать очищающий div. Overflow:hidden с триггером hasLayout для IE было бы достаточно, и это намного удобнее. - person RyanP13; 12.07.2010
comment
Комментарий RyanP13 правильный. См. jsfiddle.net/QQxb3/5. Я никогда не знал об этом раньше и согласен, что это гораздо более удовлетворительное решение, чем мое. - person Steven; 12.07.2010
comment
@ Стивен Сюй - для меня это тоже было ново. Только узнал об этом, так как иногда использование overflow:auto для сложных вложенных поплавков может создать нежелательную прокрутку. Случается нечасто, но было на моем последнем проекте. - person RyanP13; 13.07.2010