CSS三列布局

如果你是一个有心人，你会发现网上三栏布局是最流行的一种布局方式，的确，不论是腾讯这个门户网站，还是专业性极强的CSDN，都广泛采用了三列布局，当然，今天，我们只介绍一下三列布局的一些基础方法。
如果采用表格布局，三列非常简单，代码如下:

//<table>
//<tbody>
//<tr>
//<td>第一列</td>
//<td>第二列</td>
//<td>第三列</td>
//</tr>
//</tbody>
//</table>

,当然，我没有对表格的细节进行编码，如果有兴趣，可以下去自己试一试，今天我们主要讲的是用CSS实现三列布局。
要进行三列布局，首先要懂得float这个属性，懂得了float属性之后就可以直接进行布局了，好，开始吧！
.line{ width:960px;}
.left{ float:left; width:300px;}
.right{float:right; width:300px;}
.center{ width:300px;}
这个是CSS的定义，关于html代码如下:

//<div class="left">这个是左边的一列</div>

//<div class="right">这个是右边的一列</div>

//<div class="center">这个是中间的一列</div>

记住，这个地方一定要class="right"在class="center"之前，让.center这个div夹在.left和.right之间，自然就实现了三列布局，当然，一定要注意，.left,.right,.center三列的总宽度(margin+padding+width+border)不能超过.line的宽度，不然由于浮动布局的特性，导致.center下移，三列布局就破坏了。
由于IE6对盒状模型的解释错误，如果同时设置margin,padding,width，会导致一些意想不到的布局，所以我建议在使用三栏布局的时候只使用width,而不去使用padding和margin,而改在对每列里面的子元素设置padding和margin，当然这样也避免了margin和padding的叠加（这个今天就不讲了）。
本人处于对这个精确到一个像素的布局的厌恶（因为一旦超过一个像素，就可能导致整个布局全军覆没），所以建议采用网格布局，具体什么是网格布局，今天也不讲了。