Блог

Главная - Вопросы по программированию - Проблема с макетом DIV

Проблема с макетом DIV

#css #layout #html

#css #макет #HTML

Вопрос:

У меня возникли проблемы с межбраузерным макетом DIV на следующей странице:

www.richmindonline.com/index2.html

Я создал границу вокруг обоих разделов, чтобы ее было легко идентифицировать.

Похоже, что IE9 правильно вкладывает внутренний DIV во внешний DIV, тогда как Firefox разделяет divs по-разному. Я использую тег «cheat», чтобы выровнять divs по центру, но я тестирую без этих тегов, и браузеры по-прежнему отображают их по-разному.

Дивы, о которых идет речь, расположены под моей строкой комментариев:

Я знаю, что вы, ребята, умные, и мне нужна ваша помощь! Спасибо, Роб

Ответ №1:

Вам нужно очистить плавающие divs, добавив что-то вроде: <br clear="all"/> или <div style="clear:both; height:0;"></div> и добавить ширину к родительскому div, это должно исправить.

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

например

 <div class="parent">
  <div style="float:left"></div>
  <div style="float:left"></div>
  <div style="float:left"></div>
  <br clear="all"/>
</div>

Для получения дополнительной информации: http://quirksmode.org/css/clearing.html

Комментарии:

1. Привет, Рейна, я не совсем понимаю, куда добавить этот код, и у меня уже есть ширина, назначенная родительскому DIV, по крайней мере, я так думаю. Любые разъяснения были бы полезны. Спасибо, Роб

2. Добавьте его сразу после последнего div перед закрытием родительского / контейнерного div

3. Хорошо …. просто попробовал и ничего. Я думаю, что я не понимаю, какой div является «последним», а какой — «родительским». На этой странице так много разделов, что я в замешательстве. Прошу прощения. Может быть, вы могли бы показать мне пример из моего кода?

4. Хорошо, Рейна. Я рискнул и поместил его в другое место, и это сработало. Можете ли вы просто объяснить, что делает этот тег? Что означает «Очистить»?

Метки: