经典的三列布局

三列布局, 两个固定宽度的左右边栏,用于显示主要内容区域的高度可变的中心栏.

在今天Blog发展的黄金期, 三栏布局有广泛的使用性. 

先让我们看一些代码:

上面是大致的布局标记,一个的额外DIV包含了所有你需要的列.

对应的样式表单是很简单的.我们假设分别需要一个固定宽度为200像素的左列和一个固定宽度为150像素的右列.为了方便注释, 我将left, right, center分别缩写为: LC, RC, CC.

主要的CSS是这样的:

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

可以随便的替换你想要的左右列像素值, 该技术工作在主要的现代浏览器中: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6.

其原理:让左右边栏显示在 容器DIV的margin上, 注意,#left 的margin-left和#right的margin-right是关键的CSS 规则.