полная ширина страницы, центрированный контент, лучший способ? - PullRequest
Новая
       5

полная ширина страницы, центрированный контент, лучший способ?

0 голосов
/ 17 февраля 2010

Многие дизайны, над которыми я сейчас работаю, требуют центрирования страницы, я использую margin: 0 auto; ширина: 955;

У каждой основной секции есть div с нижней границей, которая в этом макете будет иметь ширину 955 в центре экрана.

Однако я хочу, чтобы фактические границы были на всю ширину страницы.

Каков наилучший способ сделать это чисто? Я делаю это так же, как StackOverflow использует для нижнего колонтитула, но если у меня есть 3 границы на странице, которая кажется грязной?

1 Ответ

0 голосов
/ 17 февраля 2010

Если вы хотите иметь несколько разделов, разбитых на границы, охватывающие всю ширину, лучше всего структурировать страницу следующим образом: 

<body>
  <div id="container" style="width: 100%;">
    <div style="width:100%;border-top:1px solid black;">
       <div style="width:955px; margin:0 auto;">
           Section 1 Content
       </div>
    </div>
    <div style="width:100%;border-top:1px solid black;">
       <div style="width:955px; margin:0 auto;">
           Section 2 Content
       </div>
    </div>
    <div style="width:100%;border-top:1px solid black;">
       <div style="width:955px; margin:0 auto;">
           Section 3 Content
       </div>
    </div>
  </div>
  <div id="footer" style="border-top: 1px solid black;">
    Footer Content
  </div>
</body>

Чтобы сделать вашу жизнь еще проще, я настоятельно рекомендую заменить встроенные стили именами классов и использовать внешнюю таблицу стилей. Таким образом, вы можете присвоить каждому разделу одно и то же имя класса и написать стили только один раз.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...