CSS-плавающие элементы с неизвестной шириной не переносят пробелы с помощью doctype

Question

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

http://corexii.com/floatproblem/float.html

Добавить отображение: встроенная таблица;и большой переносит свой контент (последовательно во все браузеры).:

http://corexii.com/floatproblem/table.html

Но введите doctype (не только strict, ЛЮБОЙ doctype), и это больше не работает в Firefox:

http://corexii.com/floatproblem/doctype.html

Как мне получить правильный div для переноса его содержимого при одновременном использовании doctype, надежно используя его в разных браузерах?

Answer 1

Как мне получить правильный div для переноса его содержимого при одновременном использовании doctype в одно и то же время надежно в разных браузерах?

Без определения ширины, ты не можешь.В этом случае я бы рекомендовал использовать процентную ширину, но это зависит от вас.

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

Answer 2

CSS не может делать все, что могут макеты на основе таблиц.Во-первых, макеты с динамической шириной намного сложнее.Макеты без таблиц по-прежнему предпочтительнее в 98% случаев, но если вам действительно нужен такой макет с динамической шириной, вам, возможно, придется использовать таблицу.

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

Answer 3

Вы можете начать с включения BODY элемент.

Traingamer объяснил вам поведение Firefox и то, что нужно сделать, чтобы получить желаемый результат.Вы можете послушать его вместо того, чтобы углубляться в тему о том, что с помощью CSS невозможно создавать макеты.

Не вините CSS в проблемах, которые ты представляют, не придерживаясь правильных веб-спецификаций.