Question

我正在处理的很多设计都要求页面居中，我使用margin：0 auto;宽度：955;

每个主要部分都有一个带有底部边框的div，在此布局中，屏幕中央的宽度为955.

我希望实际的边框是页面的整个宽度。

干净利落的最佳方式是什么？我一直在使用StackOverflow用于页脚的方式，但如果我在页面上有3个边框似乎很乱？

Answer 1

如果您希望有几个部分被划分为跨越整个宽度的边框，那么最好的选择是按如下方式构建页面：

<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>

为了让您的生活更轻松，我强烈建议您使用类名替换内联样式并使用外部样式表。这样，您可以为每个部分指定相同的类名，并只编写一次样式。

整页宽度边框，居中内容，最佳方式？

1 个答案: