圣杯布局:是在三列布局左右定宽中间自适应的基础上,要求中间部分首先渲染,是通过父元素的左右边距来进行定位的
首先要理解
-
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%;