css经典布局系列三——三列布局(圣杯布局、双飞翼布局)

三列布局背景介绍

• 三列元素，左右元素固定宽度；
• 中间元素自适应；

<div id="left">
	left
</div>
<div id="middle">
	middle
</div>
<div id="right">
	right
</div>

定位实现三列布局

• 左右两列绝对定位并且固定宽度；
• 中间元素自适应，且左右margin设置为左右元素的宽度；
• 定位的缺点：当出现滚动条时，内容区在滚动条后边显示，而且内容区仍旧被压缩(不推荐使用)

*{
	margin: 0;
	padding: 0;
}
body{
    /*最小宽度 = left *2 + right  */
    min-width: 600px;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    height: 200px;
    background: green;
}
// 三列的设置
#left{
    position: absolute;
    left: 0;
    top:0;
    /*透明度 0 - 1*/
    /*opacity: 0.5;*/
}
#right{
    position: absolute;
    top:0;
    right: 0;
}
#middle{
    margin: 0 200px;
}

浮动实现三列布局</