一种简单、快速、标准的 div 分栏

作者：vkvi 来源：ITPOW（原创）日期：2008-8-22

原理是给外层 div 指定 position: relative;，而内层 div 凡是指定了宽度的就指定 position: absolute;，同时再指定 top、left 等定位，若无宽度（一般有一列为自动宽度）就通过 margin 来确定位置。

兼容 IE6、IE7、FF 等浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>一种简单、快速、标准的 div 分栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body
{
	text-align:center;
}

.pageBody
{
	position: relative;
	margin:0px auto 0px auto;
	width: 760px;
}

.leftCol
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height:300px;
	background-color:#CCCCCC;
	text-align:left;
}

.mainCol
{
	margin-right: 200px;
	margin-left: 200px;
	height:300px;
	background-color:#CCFFFF;
	text-align:left;
}

.rightCol
{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 200px;
	height:300px;
	background-color:#CCCCCC;
	text-align:left;
}
</style>
</head>

<body>

<div class="pageBody">
	<div class="leftCol">
	  <ul>
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	    <li>4</li>
	    <li>5</li>
	  </ul>
	</div>
	<div class="mainCol">
	  <p>一种简单、快速、标准的 div 分栏</p>
	</div>
	<div class="rightCol">
	  <p>广告</p>
	</div>
</div>

</body>

</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

至少有一栏的 position 值为 static（默认值）（上例中第二栏就是这样的），这样才可以把外层 div 撑大，否则会与下面的网页发生重叠。

电邮：cftea@126.com