双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。
主要是优化了圣杯布局中开启定位的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
#parent {
height: 300px;
}
#left,
#center,
#right {
height: 300px;
font-size: 50px;
/* 第一步: 在三个容器在一行排列 => 左右容器因为center的宽度是100% 所以放不下就掉下去了 */
float: left;
}
#left {
300px;
background-color: #c9394a;
/* 第三步位置的移动 利用margin的负值的技巧 */
margin-left: -100%;
}
#center {
100%;
}
#right {
300px;
background-color: greenyellow;
/* 第三步位置的移动 利用margin的负值的技巧 */
margin-left: -300px;
}
#inner {
height: 300px;
background-color: green;
/* 第二步: 加到中间的容器的身上 margin */
margin-left: 300px;
margin-right: 300px;
}
</style>
</head>
<body>
<!-- 双飞翼 结构 center left right 左右定宽 中间自适应
作用: 把圣杯布局的定位给优化掉了
实现思路:
1. 让三个容器在一行显示 float：left
2. 让中间的容器留出间距(为了放左右两个容器) - 给中间的容器加外间距 margin
3. 进行移动 把左边容器移动到center容器的左边
把右边容器移动到center容器的右边
利用marign的负值的技巧进行移动
定位直接被优化掉了 双飞翼布局里面是没有定位方位移动的
总结: 圣杯布局、双飞翼布局
相同点: 结构顺序一样 center left right
第一步是一样的 都是用float让三个容器在一行显示
区别: 双飞翼布局 在中间的容器外面前套一层父容器
左右留白显示的方法不一样:
+ 圣杯布局 parent 加的内填充 padding-left/padding-right:200px
+ 双飞翼布局 中间容器的子元素 margin外间距 margin-left/margin-right:200px
移动位置的方法不一样:
+ 圣杯布局 margin负值的技巧 + position的方位 一起来实现位置的移动
+ 双飞翼布局 margin负值的技巧 一步搞定 把position定位方位移动给优化掉了
双飞翼布局 其实是对圣杯布局的一个优化写法！
-->
<div id="parent">
<div id="center">
<div id="inner">中间</div>
</div>
<div id="left">左边</div>
<div id="right">右边</div>
</div>
</body>
</html>