圣杯布局VS双飞翼布局

圣杯布局步骤

两边两栏固定宽度，中间栏宽度自适应

1,html结构+两栏定宽，中栏宽自适应

main

aside

r-box

图片.png

图片.png

2,浮动

图片.png

浮动

3,负margin把红色和黄色移动到蓝色上面

图片.png

图片.png

4,给三个div的父包裹层设置左右padding，给左右两栏留出空间

留出两边空间？

图片.png

图片.png

5,将左右两栏移动到空白区域？

1）使用负margin没有作用
那么考虑位置移动 父容器没有设置任何出static之外的定位，所以不能使用绝对定位，则相对于原来的位置发生移动，设置相对定位

图片.png

图片.png

OK 大功告成完成需求

缺点

当页面宽度缩小，导致中间栏宽度<左边栏宽度时，布局会乱

产生原因 margin-left:-100%导致

因为中间栏宽度<左边栏宽度时，margin-left:-100%为中间栏的宽度 然而这个宽度不能放下左边栏，所以会导致布局错乱，左边栏实现不了 放到蓝色块的左边

双飞翼

1完成到这里时发生区别

图片.png

圣杯布局发生布局错乱的关键就是中间栏的宽度小于左边栏时，由margin-left:-100%产生

所以双飞翼就是绕过margin-left:-100%这个宽度指的是中间栏的宽度

解决问题的关键！ 使中间栏的宽度发生变化至少大于红+黄的宽度

所以，给蓝色添加一个div包裹层，包裹层的宽度为100%，蓝色块设置左右margin值，为左右两栏留出位置

图片.png

图片.png

OK屏幕减小 蓝色div宽度小于红色div宽度 不会布局错乱

图片.png