实现双飞翼布局的三种方式

使用定位来实现

实现流程：

1.父盒子相对定位，左右 padding 为子盒子宽度，左右子盒子绝对定位，宽度写死；

2.左边子盒子 left top 给 0，右边子盒子 right top 给 0；

3.中间的盒子宽度给 100%

html结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 200px;position: relative;padding: 0 210px;}.box div {height: 100%;}.left {width: 200px;position: absolute;left: 0;top: 0;background-color: pink;}.center {width: 100%;background-color: green;}.right {width: 200px;position: absolute;right: 0;top: 0;background-color: yellow;}</style></head><body><div class="box"><!-- 1.父盒子相对定位，左右 padding 为子盒子宽度，左右子盒子绝对定位，宽度写死；2.左边子盒子 left top 给 0，右边子盒子 right top 给 0；3.中间的盒子宽度给 100%--><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

使用浮动来实现

实现流程

1.给父盒子设置左右 padding ，距离为左右子盒子的宽度；

2.给左右盒子设置宽度，写死，左中两个盒子左浮动，右边盒子右浮动；

3.给左边盒子设置 margin-left ，右边盒子设置 margin-right，均为负值，大小为自身的宽度；

4.中间盒子宽度设置 100%

html结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 200px;padding: 0 210px;}.box div {height: 100%;}.left {width: 200px;float: left;margin-left: -210px;background-color: pink;}.center {width: 100%;float: left;background-color: green;}.right {width: 200px;float: right;margin-right: -210px;background-color: yellow;}</style></head><body><div class="box"><!-- 1.给父盒子设置左右 padding ，距离为左右子盒子的宽度；2.给左右盒子设置宽度，写死，左中两个盒子 左浮动 ，右边盒子右浮动；3.给左边盒子设置 margin-left ，右边盒子设置 margin-right，均为负值，大小为自身的宽度；4.中间盒子宽度设置 100%--><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

使用flex布局实现

实现流程

1.父盒子设置 display：flex，左右子盒子宽度写死；

2.中间的盒子宽度给 100% 或者 flex：1；

html结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 200px;/* padding: 0 210px; */display: flex;}.box div {height: 100%;}.left {width: 200px;background-color: pink;}.center {/* width: 100%; */flex: 1;background-color: green;}.right {width: 200px;background-color: yellow;}</style></head><body><div class="box"><!-- 1.父盒子设置 display：flex，左右子盒子宽度写死；2.中间的盒子宽度给 100% 或者 flex：1；--><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>