本文主要是介绍CSS之两栏固定布局（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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%。比如说我头部的内容不想居中，那么我们就可以使用
这篇关于CSS之两栏固定布局（一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
