Какое наименьшее количество DOV, которое можно использовать для создания следующего макета страницы?

StackOverflow https://stackoverflow.com/questions/4787665

  •  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. Кроме того, вы все рассматриваете тот факт, что правильная панель должна быть обрушена в пустой.

Div layout structure

Не считая никаких вложенных DOV для реальных функций, т.е. Меню в области содержания и т. Д.

Мой счет 6 ???

Это было полезно?

Решение

Если вам не нужно обернуть свои элементы в фиксированную ширину, вам нужно всего 5 - в противном случае 6.

  1. заголовок
  2. оставил
  3. середина
  4. Правильно
  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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top