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

在上一篇《Web布局连载——两栏固定布局（四）》中留了一个下文，“No div, no float, no clear, no hack”。看起来颇有意思，这种没有div，没有float，没有清除浮动和没有hack的布局，仍是看到的少数，固然除了 table布局。由于table布局是不须要使用前面说的几个部分。那么今天咱们要讲的布局是否是table布局呢？欲想知道，那就一块儿随着往下看吧。

首先今天这个布局的思路是来自于sneak peek的《No div, no float, no clear, no hack*, no joke!》一文。虽然整个页面看到不到table的有关标签，可是其布局的原理倒是和table如出一辙。那么咱们实现以下所示的效果，究竟要怎么来写呢？

既然原理是来自于表格，那么表格的结构，我想不用我在这里多说，你们应该都知道，若是您不知道，那加紧补习一下html中的表格标签相关应用。表格用于布局，最大的时候是整个页面都是table，并且table里还有table，层层关系是那个复杂呀，头痛。可今天要说的，咱们只是运用table的原理来布局，并且只是运用在分栏部分。具体的咱们来看：

HTML结构

<div id="wp">
 <div id="hd">Header</div>
  <div id="bd">Body
   <div id="doc">
    <div id="s1">sidebar content</div>
    <div id="s2">main content</div>
   </div>
  </div>
 <div id="ft">Footer</div>
</div>

上面的结构其实很相似于前面几篇文章介绍的布局结构，只是在两个方面不同，其一是类名换了；其二是页面主内容的结构更深层了。为了帮助你们更好的理解这个结构，我简单的说一下他们各起的做用：

1. div#wp是整个页面的容器;相似于div#wrapper
2. div#hd是整个页面的头部容器，相似于div#header
3. div#bd是整个页面的主体部分，相似于div#body；其主要包含了边栏和主内容两个部分，固然有时还有其余栏；
4. div#doc是整个页面主体的列包容器；
5. div#s1和div#s2是页面布局中的列；相似于div#sidebar和div#main-content
6. div#ft是整个页面的脚部容器，相似于div#footer

其中最为关键的是div#bd在这里至关于table，div#doc在这里至关于表格的行table-row，而div#s1和div#至关于表格的单元格table-cell。但是上面有div，开头不用div等布局，所以sneak peek将整个div布局换成了列表嵌套的形式，但用div也不会影响整个布局效果。接下来看看修改后的结构：

<ol id="wp">
  <li id="hd">
    <div class="container">
			<h2>Header content</h2>		
    </div>
  </li>
  <li id="bd">
    <ol id="doc">
      <li id="s1">
        <div class="container">
          <h2>Sidebar Content</h2>
        </div>
      </li>
      <li id="s2">
        <div class="container">
          <h2>Main Content</h2>
        </div>
      </li>
    </ol>
  </li>
    <li id="ft">
      <div class="container">
        <h2>Footer Content</h2>
      </div>
    </li>
</ol>

初一看以为理解不透，我也没整明白为何要用列表，不过我建议使用div会更易理解。咱们也不纠结于结构用什么样的标签，接下来看布局样式的实现：

CSS Code

* {
  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
 * #wp = wrapper 整个容器
 * #hd = header  头部
 * #bd = body 主体容器
 * #ft = footer 脚部
 * #doc = document 主体
 * #s1,#s2 = column 列
 *
\*==========================================================*/
#wp {
  width: 960px;/*页面宽度*/
  margin: 0 auto; /*水平居中*/
  list-style-type: none;/*去掉列表默认类型符号*/
  text-align: left;/*重置文本左对齐*/
}
#bd {
  display: table;/*表格显示*/
  table-layout: fixed;/*这个很重要*/
  border-collapse: separate;
}
/*在ie6下词内换行*/
*html #bd {
  word-wrap: break-word;
}
#doc {
  display: table-row;/*表格行显示*/
}
#s1,#s2 {
  display: table-cell;/*表格单元格显示*/
}
/*ie6-7下不支持display:table-cell，所以换成下面的代码*/
#s1,#s2,{/*注意选择器后面的逗号不能丢，这个很是重要，否则ie6下无效果*/
  display:inline;
	zoom:1;
	vertical-align:top;
	position: relative;
	margin-top: -20px;
	overflow-x:hidden;
}
#s1 {
  width: 220px;/*侧栏宽度*/
}
#s2 {
  width: 720px;/*主内容宽度*/
  padding-left: 20px;/*由于这个是单元格表现形式，因此不能使用margin-left来控制两列的间距，须要使用padding*/
}
/*兼容mac下的IE低版本写法*/
/*\*//*/
  #s1,#s2 {
    display:inline-block;
    float: left;
  }
#ft {
  clear:both;
}
/**/

/*装饰样式*/
#hd {
  padding-bottom: 10px;
}
#bd {
  padding-bottom: 10px;
}
#hd .container{
  background-color: #b1b1b1;
  color: #fff;
}
#s1 .container{
  background-color: #E7DBD5;
}
#s2 .container{
  background-color: #F2F2E6;
}
#doc .container {
  min-height: 200px;
  height: auto !important;
  height: 200px;
}
#ft .container{
  background-color: #b1b1b1;
  color: #fff;
}

这样一来咱们就使用列表（你也可使用其余的标签）制做了一个相似于表格功能的布局效果，

上面的案例是侧栏在左边，主内容在右边，若是要制做一个侧栏在右边，主内容在左边，只须要根据须要将div#s1和#div#s2的宽度值进行必定的转换便可。

这种布局方法通过测试，能够兼容全部浏览器。虽说no div, no float, no clear, no hack。其实仍是多少使用到了hack技巧，若是不使用，在IE六、7下是没法实现这样的布局效果。这种方法其实也是制做等高两栏布局的一个好方法，固然这种方法也只限于两栏布局，你能够在div#doc内添加更多的列div#s3,div#s4...之类，只是前提条件，他们的宽度与列与列之间的间距总各不能大于div#wrap的宽度。

若是您对这种布局方法感兴趣的话，不仿在阅读一下sneak peek的《No div, no float, no clear, no hack*, no joke!》和《A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK!》，从中找到你还不了解的地方。

到目前为止这个系列为你们介绍了五种不一样的两栏固定布局方法，前面四种以下所示：

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

其实真正加起来也并不仅五种，从中也有介绍其余的实现方法，下一回为你们介绍第六篇，两栏等高布局，喜欢的同窗敬请观注w3cplus的相关更新。

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

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