CSS三列布局之宽度自适应

1、html

<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的
报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 
虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的
网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，
你可以领会要点，举一反三。</div>
<div class="right">right</div>

2、css

                    .left {
				width: 200px;
				height: 600px;
				background: #ccc;
				position: absolute;
				left: 0;
				top: 0
			}
			
			.main {
				height: auto;
				margin: 0 300px 0 200px;
				background: #9CF
			}
			
			.right {
				height: 600px;
				width: 300px;
				position: absolute;
				top: 0;
				right: 0;
				background: #FCC;
			}

3、运行结果

                          

 总结：中间的盒子会随着窗口的变化而变化，通过左右两个盒子的定位实现了中间盒子的宽度自适应宽度自适应。