Очистить последний плавающий элемент с помощью CSS?

Question

У меня есть коллекция плавающих div внутри другого div. Дочерние элементы имеют переменную ширину и высоту - то есть они заполняются с использованием динамических данных, которые я не контролирую. Теперь иногда, что случится, если последний дочерний div имеет огромную высоту со стеной текста, потому что другие div делят его на небольшую ширину. Это происходит только в IE 6, 7, 8 - FF3.6 обрабатывает его правильно - он гарантирует, что огромный div начинается после разрыва строки с большой шириной.

Есть ли способ заставить IE вести себя так же?

Answer 1

Единственное решение этой проблемы - одно из трех: укажите clear: both ;, укажите ширину по умолчанию или выполните одно или оба из них динамически с помощью jquery / javascript. Пока вы позволяете контенту определять высоту и ширину, вы столкнетесь с проблемами.

Использование очистки: оба; на все div поместит каждый float в свой собственный ряд. Это не похоже на то, что вы хотите.

Указание ширины будет наиболее предсказуемым. Браузер учитывает ширину и очистит до следующей строки, если места недостаточно.

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

Содержимое, которое вы загружаете, представляет собой простой текст или содержит элементы div и другие элементы уровня блока? Как это плавало? это смесь поплавка: слева; и плавать: правильно; ? или это все в одну сторону?

Answer 2

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

#the-last-div { clear: both; float: left }

Вы можете или не можете хотеть, чтобы он плавал, если вы хотите, чтобы он был поперек всей страницы.