boycgit/three_column.html

## three_column.html
<!Doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=320px;initial-scale=1.0;"/>
    <title>三列布局</title>
</head>
<style>
/*第一种布局样式*/
#left,#right {
    width:100px;
    text-align: center;
    vertical-align: middle;
    background-color: #bbb;
}

#left{
	float:left;
}

#right{
	float:right;
}

#main {
	background-color: red;
	border:1px solid #f00;
	margin:0 110px;
	overflow: hidden;
}


/*第二种布局样式*/
/*需要使用相对定位，搭配z-index*/
#left2,#right2{
	position: relative;
	float:left;
	width:50%;
	background-color: #eee;
	margin-left:-400px;
	text-align: center;
	z-index: 1;
}

#main2{
	position: relative;
	background-color:green;
	float:left;
	text-align: center;
	width:800px;
	z-index:200;
}

#left2 .inner,#right2 .inner{
	background-color: orange;
	margin-left:400px;
}

</style>

<body>
	参考文章：<a href="http://www.zzsky.cn/build/content/1810.htm">CSS三栏布局（两边固定中间自适应宽度）的方法</a>
<hr/>
	<!-- “左右两列定宽，中间自适应”的三列布局-->
	<!-- 注意main列放在最后 -->
    <div id="left">左边</div>
    <div id="right">右边</div>
    <div id="main">中间</div>

    <hr/>

    <!--  “中间列定宽，左右列自适应”的三列布局 -->
    <!-- 注意main列放在中间 -->
    <div id="left2"><div class="inner">左边</div></div>
    <div id="main2"><div class="inner">中间</div></div>
    <div id="right2"><div class="inner">右边</div></div>

    <script type="text/javascript">
    </script>
</body>

</html>
	<!Doctype html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=320px;initial-scale=1.0;"/>
	<title>三列布局</title>
	</head>
	<style>
	/第一种布局样式/
	#left,#right {
	width:100px;
	text-align: center;
	vertical-align: middle;
	background-color: #bbb;
	}

	#left{
	float:left;
	}

	#right{
	float:right;
	}

	#main {
	background-color: red;
	border:1px solid #f00;
	margin:0 110px;
	overflow: hidden;
	}


	/第二种布局样式/
	/需要使用相对定位，搭配z-index/
	#left2,#right2{
	position: relative;
	float:left;
	width:50%;
	background-color: #eee;
	margin-left:-400px;
	text-align: center;
	z-index: 1;
	}

	#main2{
	position: relative;
	background-color:green;
	float:left;
	text-align: center;
	width:800px;
	z-index:200;
	}

	#left2 .inner,#right2 .inner{
	background-color: orange;
	margin-left:400px;
	}

	</style>

	<body>
	参考文章：<a href="http://www.zzsky.cn/build/content/1810.htm">CSS三栏布局（两边固定中间自适应宽度）的方法</a>
	<hr/>
	<!-- “左右两列定宽，中间自适应”的三列布局-->
	<!-- 注意main列放在最后 -->
	<div id="left">左边</div>
	<div id="right">右边</div>
	<div id="main">中间</div>

	<hr/>

	<!-- “中间列定宽，左右列自适应”的三列布局 -->
	<!-- 注意main列放在中间 -->
	<div id="left2"><div class="inner">左边</div></div>
	<div id="main2"><div class="inner">中间</div></div>
	<div id="right2"><div class="inner">右边</div></div>

	<script type="text/javascript">
	</script>
	</body>

	</html>