Web布局连载——两栏固定布局（一）

发布于大漠

12 年前

CSS布局是一个很老的话题了，网上这方面的教程可以说是随处可见，本站前面也有一些相关的布局教程，但都是一些特殊的，比如说《等高布局》、《左定宽度右边自适应的等高布局》、《960网格布局》、《固定footer布局》和《中间固定两边自适应布局》等等。但这些布局并不是常见的布局，使用起来并不是太多，而对于常见的布局，w3cplus还没有对口的教程。好久之前有同学想了解这方面的知识，答应简单的写些这方面的教程，方便初学的csser，或者方便大家使用时，可以直接copy使用。于是就有了这个系列的想法，从今天开始我会针对布局开展一个系列的布局demo结构，整个系列中会包括固定布局（两栏固定布局、三栏固定布局）、自适应布局（两栏自适应布局、三栏自适应布局）、弹性布局（两栏弹性布局、三栏弹性布局）、网格布局（960网格布局、1140网格布局）和响应式布局。希望这些布局的demo结构对大家会有所帮助。

在开始这个系列教程之前先向大家说明一下，这个系列教程都会以简单的篇幅为主，首先从html结构出发，然后对应的布局样式（其中修饰样式，大家可以自行修改），接着向大家展示对应的DEMO效果。如有特殊说明，会以代码注解形式展，或者会单独以特殊效果向大家展。

整个布局系列首先以最常见的固定布局展开，比如说第一篇就是要向大家介绍的是固定布局的中两栏布局。

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

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

HTML结构:

<div class="wrapper">
    <div class="header">
        <h1>Header content</h1>
    </div>
    <div class="aside sidebar">
        <h2>Sidebar Content</h2>
    </div>
    <div class="main-content">
        <h2>Main Content</h2>
    </div>
    <div class="footer">
        <h2>Footer Content</h2>
    </div>
</div>

结构简单描述：

div.wrapper是主容器，以960px为例，并且居中显示
div.header是页头部分
div.sidebar是侧栏部分，此处设置为220px的宽度
div.main-content是主内容部分，此处设置为720px的宽度
div.footer是页脚部分
文档流形式是从上往上加载，也就是按这样的顺序加载：header/sidebar/main-content/footer

CSS代码

*{
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Amarante', cursive;
  background: url(https://static.fedev.cn/sites/default/files/bg_body.png) repeat;
  text-align: center; /*IE6下让元素居中*/
}

/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
.wrapper {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
}

.header {
  margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}

.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  margin-right: 20px; /*边栏间距，可自行修改*/
  display: inline; /*防止IE6双边距*/
  float: left;
  margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  display: inline; /*防止IE6又边距*/
  float: left;
  margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}

.footer {
  clear: both; /*清除浮动，非常重要，不可缺少*/
}

/*===================================================*\
 *                                                   *
 *   装饰样式，可自行修改                            *
 *                                                   *
\*===================================================*/
.header {
  height: 75px;
  background-color: #BD9C8C;
  margin-bottom: 5px;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.sidebar {
  height: 350px;
  background-color: #E7DBD5;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.main-content {
  background-color: #F2F2E6;
  height: 350px;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.footer {
  background-color: #BD9C8C;
  margin-bottom: 5px;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

这个布局写样式有两个地方需要特别注意，第一是宽度的计算，“div.wrapper”的总宽度(960px) = “div.sidebar”宽度(220px) + “div.sidebar”右边距(margin-rihgt:20px) + “div.main-content”宽度（720px）；第二是清除浮动，由于“div.sidebar”和“div.main-content”进行了浮动，特别要记得在“div.footer”上清除浮动（此例是这样，如果不是footer紧挨这两个文档流，那么就要考虑在别的标签上添加）。

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

第二种布局和第一种仅有一处差别，就是侧栏居右，主内容居左，效果如下所示：

这种布局的HTML结构不变，使用第一种布局的结构，我们仅将“div.sidebar”和“div.main-content”的布局样式做一下修改：

/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
.wrapper {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
}

.header {
  margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}

.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  display: inline; /*防止IE6双边距*/
  margin-left: 20px; /*边栏间距，可自行修改*/ 
  float: right;
  margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  display: inline; /*防止IE6又边距*/
  float: left;
  margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}

.footer {
  clear: both; /*清除浮动，非常重要，不可缺少*/
}

前面两种布局效果，有些同学喜欢在文档流中先加载“div.main-content”主内容部分，然后在加载“div.sidebar”侧栏部分，这样就延伸出来另外两种布局，不过他们的效果是一样的，只是文档流加载的顺序和样式做一定的调整。

调整后HTML结构

<div class="wrapper">
    <div class="header">
        <h1>Header content</h1>
    </div>
    <div class="main-content">
        <h2>Main Content</h2>
    </div>
    <div class="aside sidebar">
        <h2>Sidebar Content</h2>
    </div>    
    <div class="footer">
        <h2>Footer Content</h2>
    </div>
</div>

接下来，我们在看看改变HTML结构后，制作上面两种效果的方法。

1、侧栏在左，主内容在右

CSS 代码

/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
.wrapper {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
}

.header {
  margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}

.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  margin-right: 20px; /*边栏间距，可自行修改*/
  display: inline; /*防止IE6双边距*/
  float: left;
  margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  display: inline; /*防止IE6又边距*/
  float: right;
  margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}

.footer {
  clear: both; /*清除浮动，非常重要，不可缺少*/
}

结构改变后，我们样式跟着改动的地方其实很简单，只要注意改变“div.sidebar”和“div.main-content”两个元的浮动方向，以及控制他们之间的间距（就左右两栏布局来说，如果一个左浮动，一个右浮动，都可以不设置他们之间的任何间距值）。

2、侧栏在右边，主内容在左边

CSS 代码

/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
.wrapper {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
}

.header {
  margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}

.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  display: inline; /*防止IE6双边距*/
  margin-left: 20px; /*边栏间距，可自行修改*/
  float: right;
  margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  display: inline; /*防止IE6又边距*/
  float: left;
  margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}

.footer {
  clear: both; /*清除浮动，非常重要，不可缺少*/
}

上面两种布局效果，使用了两种不同的文档结构，每种结构配合两整不同的布局方式，大家可以点击对应的效果图，打开在线的demo效果。以上布局兼容所有浏览器。

那么有关于CSS布局第一篇就说到这里，下期将继续为大家介绍固定布局中的两列布局，不过使用的方法并不是今天介绍的方法，如果你对此感兴趣，请关注本站的相关更新。

下一节：《Web布局连载——两栏固定布局（二）》

如需转载，烦请注明出处：https://www.fedev.cn/css/layout/fixed-layout/two-columns-1.html

air max 90 essential soccer