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

1. 《Web布局连载——两栏固定布局（一）》
2. 《Web布局连载——两栏固定布局（二）》

前两篇介绍的布局，是我们Web布局中常见的，而且可以说是最基础的布局结构。今天这一节中我们继续介绍两栏固定布局，只不过今天的这种布局较前两节中的布局要更为难理解。而且叫法不一，我个一般喜欢把这种布局称为负margin布局，因为在布局中我们需要依靠元素的margin-left和margin-right的相关负值。

负margin的布局实现两栏布局的方法也非常的多，今天我要先介绍的是两栏布局效果，侧栏在居左，主内容居右，而且采用四种不同的负margin布局法实现这样的效果。

方法一：

首先也多结构出发，大家还是一起看代码结构吧：

<div id="header">
    <div class="container">
        <div class="header">
            <h1>Header content</h1>
            <p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
        </div>
    </div>
</div>
<div id="page">
    <div class="container">
        <div class="main-wrap">
            <div class="main-content">
                <h2>Main Content</h2>
            </div>
        </div>
        <div class="aside sidebar">
            <h2>Sidebar Content</h2>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <h2>Footer Content</h2>
    </div>
</div>

同样简单的说明一下布局结构

1. 页面分为三个部分，头部（div#header）、主体（div#page）、脚部（div#footer），同样在这三个容器中使用了内容器（div.container）用来控制内容的居中，具体作用大家可以回头阅读一下《Web布局连载——两栏固定布局（二）》一文；
2. 页面主体部分又分为主内容（div.main-content）和侧栏(div.sidebar)，今天这里我们为主内容添加了一个外容器（div.mian-wrap）

结构相对于《Web布局连载——两栏固定布局（二）》中的结构来说，大同小异，只是今天的布局中在主内容外添加了一个容器（div.main-wrap）。那么接下来我们在写布局样式之前先来简单的了解一下今天这个布局的基本原理。

负margin布局，从字面上大家都能知道是使用元素的负margin来实现布局。其实更简单点理解就是使用元素的margin配合float的方向，从而达到我们需要两栏布局效果，我们一起看看下图：

如果上图不能帮助你理解，那么可以结合CSS样式代码一起，我想这样会有成效的，易于理解。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Amarante', cursive;
  background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
  text-align: center; /*IE6下让元素居中*/
}
/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .container宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
/*清除浮动*/
.container:after,
.container:before {
  content: "";
  display: table;
}

.container:after {
  clear: both;
  overflow: hidden;
}

.container {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
  zoom: 1;
}

#header {
  background: #b1b1b1; /*header全屏背景色设置*/
  color: #fff;
  margin-bottom: 15px; /*顶部与主内容垂直间距，可自行修改*/
}
.main-wrap {
  float: left;/*很重要*/
  width: 100%;/*很重要*/
}
.main-content {
  margin-left: 240px;/*sidebar width + margin-right*/
}
.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  float: left; /*侧栏居左*/
  margin-left: -960px;/*容器container的宽度*/
  display: inline;/*清除IE6下又边距*/
  zoom: 1;
  position: relative;
}

#footer {
  background: #b1b1b1; /*footer全屏背景色设置*/
  color: #fff;
}

/*测试样式，可自行修改*/
#header .container {
  height: 75px;
}

.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 .container {
  margin-top: 15px;
}

上面就是方法一对应的样式代码，最终效果如下面DEMO所示：

针对方法一的结构，我绘制了一个参数改变的表格，也就是说，大家以后可以根据表格，改变相应的参数值。特别声明，仅蓝底白字参数可以修改。

方法二

方法二和方法一结构是一样的，只是其样式实现方法不一样，改变了浮动的方法以及相关元素的margin值，同样在写样式之前，我们来看看其结构的演示变化图：

接下来我们一起来看对应的样式变化

.main-wrap {
  float: right;
  width: 100%;
  display: inline;
}
.main-content {
  margin-left: 240px;/*左边栏宽度+右边距*/
}
.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  float: right; /*侧栏居左*/
  margin-right: -220px;/*左边栏宽度*/
  position: relative;
  display: inline;
}

最终效果和方法一一样的，请看DEMO：

同样为了方便大家理解，我制作了一个对应的参数变化表格(同样仅蓝底白字部分参数可以对应修改)：

方法三

方法三和前面两种方法采用的结构仍然一样，只是改变不同的参数，换句话说方法一、方法二都是在方法一的基础上延伸出来的，同样，先来看其演变示意图

经过修改的部分样式代码（其他代码和方法一中一样）

.main-wrap {
  float: right;
  width: 100%;
  margin-right: -240px;/*边栏宽度和间距*/
  display: inline;/*清除IE6又边距bug*/
}
.main-content {
  margin-right: 240px;/*边栏宽度和间距*/
}
.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  float: left; /*侧栏居左*/
  position: relative;
}

最终效果如下面DEMO所示：

对应的参数变化表格(同样仅蓝底白字部分参数可以对应修改)：

方法四

最后一种方法和前面几种方法略有不同，这种方法具有今天前面介绍的三种方法特性，但也兼容了前面两节介绍的布局个性，下面我们来简单的看看最后一种布局的实现方法

HTML结构

<div id="header">
    <div class="container">
        <div class="header">
            <h1>Header content</h1>
            <p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
        </div>
    </div>
</div>
<div id="page">
    <div class="container">
        <div class="main-content">
            <h2>Main Content</h2>
        </div>
        <div class="aside sidebar">
            <h2>Sidebar Content</h2>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <h2>Footer Content</h2>
    </div>
</div>

此处的结构和前面三种方法相比较，少了一个主内容的外容器（div.main-wrap），但和前两节介绍的布局结构是完全一样的，接下来看一下其布局的演示图：

对应的样式如下所示：

.main-content {
  float: left;
  width: 720px;/*主内容宽度*/
  display: inline;/*清除IE6下双边距Bug*/
  margin-right: -100%;
  margin-left: 240px;/*边栏宽度和间距*/
  position: relative;
  zoom: 1;
}


.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  float: left; /*侧栏居左*/
  margin-left: 0;
  margin-right: -220px;/*边栏宽度*/
  display: inline;
  position: relative;
}

通过上面的方法，在缺少一个结构的情况下，使用负margin和float同样实现方法一、二、三的布局效果。

对应的参数变化表格(同样仅蓝底白字部分参数可以对应修改)：

共实这种方法是由drupal的zen主体布局上演变过来的，如果你整个drupal或许一眼能看出来。

上面是实现同一效果使用的不同四种方法，虽然是不同的四种方法，但可以说这些方法是大同小异，只要你理解了其原理，哪一种方法对于来说都不复杂，只是你以前没有去想过，或者觉得负margin的布局头痛，烦人，才没去使用，希望这篇文章对布局感到陌生的同学有一丝帮助。上面四种方法都经过各浏览器的测试，可以兼容所有浏览器，包括讨厌的IE6。

这篇文章是继《Web布局连载——两栏固定布局（一）》、《Web布局连载——两栏固定布局（二）》之后的第三篇介绍两栏固定布局方法的文章，下一节将继续为大家介绍使用负margin制作两栏固定布局的方法，和今天不同之处是侧栏居右，主内容居左。如果你喜欢这个系列的文章，请关注本站的相关更新，如果你有什么更好的建议或者文章中有出错之处可以随时在评论中留言，我会第一时间回复。

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

如需转载，烦请注明出处：http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html