网页布局中三栏布局的实现

本文简单展示实现网页三栏布局的3种方式。

一、第一种：代码稍长，但是比较实用，页面主体先显示出来，也就是网速慢时，网页的主体内容先呈现给浏览者。

结构如下：

<div class="wrap">
<!-- main -->
	<div class="main">
		<div class="context">
			<div class="inner">
				<h1>这是主体部分</h1>
			</div>
		</div>
	</div>
<!-- subMain -->
	<div class="subMain">
		<div class="inner"><h2>这是左边栏部分</h2></div>
	</div>
<!-- sider -->
	<div class="sider">
		<div class="inner"><h3>这是右边栏部分</h3></div>
	</div>
</div>

样式：

*{margin: 0;padding: 0;}
.wrap{width: 95%;margin: 0 auto;}
.main {
	width: 100%;
	float: left;
}
.context {
	background-color: #000;
	width: auto;
	margin: 0 25%;
	overflow: hidden; /* clear float */
	_zoom: 1; /* clear float for IE 6 */
}
.subMain, .sider {
	background-color: maroon;
	width: 25%;
	float: left;
}
.subMain {
	margin-left: -100%;
	_margin-left: -95%; /* IE 6 计算百分比方式与FF不同 */
}
.sider {
	margin-left: -25%;
}
.inner {background-color: #555;color: #FFF;margin: 1em;}

请单击查看Demo

二、第二种：比较容易实现，也比较直观，左边的左浮动，右边的有浮动，主体无浮动。缺点是ie6会出现3px bug，这要求栏目宽度固定，所以不太灵活。

结构：

<div class="wrap">
<!-- subMain -->
	<div class="subMain">
		<div class="inner"><h1>这是左边栏部分</h1></div>
	</div>
<!-- sider -->
	<div class="sider">
		<div class="inner"><h2>这是右边栏部分</h2></div>
	</div>
<!-- main -->
	<div class="main">
		<div class="inner"><h3>这是主体部分</h3></div>
	</div>
</div>

样式：

.subMain, .sider {
	background-color: maroon;
	width: 25%;
}
.subMain {
	float: left;
}
.sider {
	float: right;
}
.main {
	background-color: #000;
	margin: 0 25%;
	overflow: hidden;
	_zoom: 1;
	/* IE 6 下存在3px bug，可以使用左右外边距为原本值+3px的形式，即_margin:0 npx+3px; */
}

请单击查看Demo

三、第三种：定位布局，同样比较直观，三栏的显示顺序完全按照文档流的顺序。

结构：

<div class="wrap">
<!-- subMain -->
	<div class="subMain">
		<div class="inner"><h1>这是左边栏部分</h1></div>
	</div>
<!-- main -->
	<div class="main">
		<div class="inner"><h2>这是主体部分</h2></div>
	</div>
<!-- sider -->
	<div class="sider">
		<div class="inner"><h3>这是右边栏部分</h3></div>
	</div>
</div>

样式：

.subMain, .sider {
	background-color: maroon;
	width: 25%;
	position: absolute;
	top: 0;
}
.subMain {
	left: 0;
}
.sider {
	right: 0;
}
.main {
	background-color: #000;
	margin: 0 25%;
	overflow: hidden;
	_zoom: 1;
}

请单击查看Demo

注：等高的方法在此不做展示，很常用的方法就是边距法(padding-bottom = -margin-bottom = value ,value为一个比较大的值)。