比翼双飞布局

上一篇我已经写过圣杯布局啦，不知道的请戳这里—>圣杯布局 接下来我们就开始写比翼双飞布局啦，首先html结构是这样子的（敲黑板！，中间区域放在前排，且多了一层div包裹）

a、第一步，父元素撑起高度300px,分别设置不同背景颜色（为了区分）,高度设置100%，左右定宽200px,.wrapper宽度设置100%。 代码是这样子的：

效果是这样子的：

b、给左右区域和包裹区域（.wrapper）设置左浮动（float:left）代码是这样子的：

效果是这样子的：

c、然后把蓝色的放到左边，因为.wrapper的那个div宽度是100%，左移需要margin-left:-100%,这样蓝色区域会跑到粉色区域左边，并覆盖住部分粉色区域，而紫色区域会跑到蓝色区域以前的位置，代码是这样子的：

效果是这样字的：

d、接下来把紫色区域移到布局右边,移动自身宽度（margin-left:-200px），代码是这样子的：

效果是这样子的：

e、最后只要在.center设置margin:0 220px；(200px宽度+20缝隙),就完成比翼双飞布局啦~，代码是这样字的：

效果是这样子的：

结束语：

比翼双飞和圣杯共同点：都需要把中间区域放前排，都需要左浮。

比翼双飞和圣杯不同点：比翼双飞在结构上对中间区域多包裹了一层，但是css比较简单，而圣杯布局少了一层结构，在css上多用了相对定位，且在屏幕缩小到一定宽度容易错位。

转载于:https://juejin.im/post/5cb81272e51d456e3a5f0804