Какое наименьшее количество элементов div можно использовать для создания следующего макета страницы? - PullRequest
Новая
       2

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

2 голосов
/ 25 января 2011

обновление

http://www.jsfiddle.net/dougrchamberlain/nMkxE/

Посмотрите, как все это разваливается. ширина id = middle должна охватывать весь оставшийся центр #left:width - #wrapper:width = #middle:width

если #right содержит какой-либо контент, то

(#left:width + #right:width) - #wrapper:width = #middle:width

последнее изменение

Только для информации каждого. Изображение ниже было создано в MSpaint. HTML вообще не используется.

редактировать

Это не должно быть подвохом. плюс, пожалуйста, рассмотрите только html4 в качестве опции. по-видимому, я пропустил тег HTML4. Кроме того, все ли вы считаете, что правая панель должна быть свернута, когда она пуста?

Div layout structure

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

Мой счет 6 ???

Ответы [ 2 ]

0 голосов
/ 25 января 2011

РЕДАКТИРОВАТЬ: вы можете обойтись всего 4 деления, если вы используете заголовок, слева, в центре и вправо, и просто установите первый элемент в нижнем колонтитуле, чтобы очистить: влево;

Самый простой способ сделать это - сделать что-то вроде

body p {clear: left; }

как в этом примере: http://jsfiddle.net/86M3M/1/

... и если вы используете html5: div не требуется;) 

<!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>
0 голосов
/ 25 января 2011

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

  1. header
  2. left
  3. средняя
  4. справа
  5. нижний колонтитул
  6. оболочка (необязательно)

Надеюсь, вы не пытаетесь сохранитьнесколько байтов путем минимизации количества элементов div для макета:)

...