事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。
圣杯布局 :::::::::::::html代码中 middle部分首先要放在container的最前部分。然后是left,right
1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)
2.middle部分 width:100%占满
3.此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%
4.这时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 220px 0 200px
5.middle内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-200px 同理,right也要相对定位还原 right:-220px
6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px
不过衰衰地发现ie中有问题.. ie6/7/8/9中 下面的空白高度都不一样..
双飞翼布局(淘宝出品):::::
(之前的和圣杯一样 . 这时可以直接继续上边圣杯布局的步骤,也可以有所改动)
5.main内容被覆盖了吧,除了使用外围的padding,还可以考虑使用margin。
给main增加一个内层div– main-inner, 然后margin:0 220px 0 200px
6.main正确展示
**我觉得两者之间的差别就是主动与被动:
前者内边距实现撑大盒子,你自己去找合适的位子
后者是为主体添加一个外套,用外边距去帮你把内容移动到适合的位子**