Какое наименьшее количество DOV, которое можно использовать для создания следующего макета страницы?
-
24-10-2019 - |
Вопрос
Обновить
http://www.jsfiddle.net/dougrchamberlain/nmkxe/
Посмотрите, как все это разваливается. Ширина идентификатора = средняя должна охватывать весь оставшийся центр #left:width - #wrapper:width = #middle:width
Если #right содержит какой -либо контент, тогда
(#left:width + #right:width) - #wrapper:width = #middle:width
Последнее редактирование
Просто для информации каждого. Изображение ниже было создано в MSPaint. Никакой HTML вообще не используется.
редактировать
Это не должен быть трюком. Плюс, пожалуйста, рассматривайте HTML4 как вариант. Видимо, я пропустил тег HTML4. Кроме того, вы все рассматриваете тот факт, что правильная панель должна быть обрушена в пустой.
Не считая никаких вложенных DOV для реальных функций, т.е. Меню в области содержания и т. Д.
Мой счет 6 ???
Решение
Если вам не нужно обернуть свои элементы в фиксированную ширину, вам нужно всего 5 - в противном случае 6.
- заголовок
- оставил
- середина
- Правильно
- нижний колонтитул
- обертка (необязательно)
Я просто надеюсь, что вы не пытаетесь сэкономить несколько байтов, минимизируя количество DIV для макета :)
Другие советы
РЕДАКТИРОВАТЬ: Вы можете сойти с рук с 4 DIV, если вы используете заголовок, влево, в центре и вправо, и просто установить первый элемент в нижнем колонтитуле, чтобы очистить: слева;
Самый простой способ сделать это - сделать что -то вроде
тело P {clear: слева; }
как в этом примере: http://jsfiddle.net/86m3m/1/
... и если вы используете html5: не требуется dofs;)
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
...
<nav id="main"> ... </nav>
</header>
<nav id="left"> ... </nav>
<section id="main_content"> ... </section>
<section id="right_content"> ... </section>
<footer> ... </footer>
</body>
</html>