经典的三列布局

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

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

先让我们看一些代码:

<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>

上面是大致的布局标记,一个的额外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 规则.