圣杯布局图解
圣杯布局和双飞翼布局实现的问题都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染。
1、给middle部分设 width:100%,给left、right设宽度,三者都 float:left。
2、给外面最大的块all设左右padding,把middle拉出来,这样left和right去了自己的位置之后就不会把middle内容盖住了。
3、因为middle宽度为100%,left应该在最左边所以往左拉宽度100%(margin-left:-100%),而right只需要往回拉自己的宽度大小就可以(margin-left: number px)。这样就在一行了。