两列布局_左右二侧

两列布局_左右二侧_绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局_左右二侧_绝对定位</title>
		<style type="text/css">
			.container{
				/*position: absolute;
				right: 0;右边定位起始点
				left: 0;左边定位起始点*/
				position:relative;
				margin: auto;/*左右边距自动挤压,即自动居中*/
				max- 960px;/*设置最大宽度*/
			}
			.left{
				position: absolute;
				top: 0;
				left: 0;
				 200px;
				height: 600px;
				background-color: #008B8B
			}
			.right{
				position: absolute;
				top: 0;
				right: 0;
				 750px;
				height: 600px;
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<h2>基本思路:</h2>
		<ol>
			<li>给2列添加一个定位的父集区块，并设置定位属性，一般设置为相对定位</li>
			<li>给左右2个区块分别使用绝对定位</li>
			<li>父集区块/定位父集必须设置宽度width</li>
		</ol>
		<!-- DOM -->
		<div class="container clear">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
		</div>
	</body>
</html>