本文共 724 字，大约阅读时间需要 2 分钟。

1. 固定布局之两栏布局——边栏在左边，主内容在右边

实现的布局效果：整个布局居中显示，而且侧栏显示在左边，主内容在右边

HTML：

- div.wrapper是主容器，以960px为例，并且居中显示

- div.header是页头部分

- div.sidebar是侧栏部分，此处设置为220px的宽度

- div.main-content是主内容部分，此处设置为720px的宽度

- div.footer是页脚部分

- 文档流形式是从上往下加载，也就是按这样的顺序加载：header/sidebar/main-content/footer

CSS：

先浮动让其包裹性和可以设置margin，然后最后清除浮动(清除浮动这一步非常的重要)

但有时候这种结构的布局并不能满足我们的需要，比如说页面的（header）部分，背景色占满了整个浏览器的宽度，那么在前面那篇文章中的布局就无法使用，因为其里面有一个“div.wrapper”将整个页面受限于一定宽度之下。那么要实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果，我们应该怎么做呢？

2. 实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果

HTML:

结构其实并不复杂，与前一教程的结构相比，这个结构略显复杂一点，每个部位都是包含了一个容器“div.container”。此时大家会问，为什么要在每个部分添加一个这样的容器，难道不能像前面的布局中所言，一个就行吗？其实要实现上面效果，前面的结构是不满足我们的需求了，为他使部分背景或背景图全屏（或者说部分内容全屏）显示，那么我们就有必要单独控制部分内容，让他的宽度是100%。比如说我头部的内容不想居中，那么我们就可以使用