圣杯布局

圣杯布局：是在三列布局左右定宽中间自适应的基础上，要求中间部分首先渲染，是通过父元素的左右边距来进行定位的

首先要理解

• margin-top、margin-left设为负值的时候，会把元素上移、左移，文档流中的位置也会发生变化
• position:relative的元素设置top、left后元素还占据原来位置，文档流中的位置不会发生变化

思路

//html
<div id='content'>
    <div id='middle'>我在中间</div>
    <div id='left'>我在左边</div>
    <div id='right'>我在右边</div>
</div>

• 将三者都设置

float:left

• 将middle的宽度设置

width:100%

• 给left设置为margin为负值，左边部分会移到middle的前面，但是会覆盖一部分

margin-left:-100%;

• 给content设置padding，给左右留出空白

padding:0 100px;

• 给left设置相对定位，向左边移动100px，填充左边空白

left:-100px;
position:relative;

• 给right设置margin，让右边部分移到middle后面

margin-left:-100px;

• 给right设置相对定位，向右边移动100px

left:100px;
position:relative;

以上两步也可简化为

margin-right: -100%;

demo地址