三列布局_左右固定

三列布局_左右固定_中间自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三列布局_左右固定_中间自适应</title>
		<style>
			.left{
				 200px;
				height: 600px;
				background-color: #008B8B;
				float: left;
			}
			.right{
				 200px;
				height: 600px;
				background-color: #FFFF00;
				float: right;
			}
			.main{
				height: 600px;
				margin-left: 200px;
				margin-right: 200px;
				background-color: #4169E1;
			}
		</style>
	</head>
	<body>
		<h2>基本思路</h2>
		<ol>
			<li>和2列布局很相似</li>
			<li>左右2列采用浮动+宽度</li>
			<li>中间区域实际是用margin挤压出来的</li>
			<li>DOM顺序不能写乱，必须先写左右再写中间</li>
		</ol>
		<!-- DOM -->
		<div class="left">左侧</div>
		<div class="right">右侧</div>
		<div class="main">主体</div>
	</body>
</html>