使用双飞翼布局的三种方法

实现效果：

---

第一种方式：绝对定位

1. 给左右盒子添加绝对定位，中间的盒子添加左右margin
2. 左右盒子固定宽高
3. 代码如下

  div {
        height: 100px;
      }
      .box1,
      .box2,
      .box3 {
        width: 100%;
        background-color: pink;
      }
      /* box1利用margin和绝对定位来实现 */
      .box1 {
        position: relative;
      }
      .box1_left {
        top: 0;
        left: 0;
        width: 100px;
        position: absolute;
      }
      .box1_right {
        width: 100px;
        right: 0;
        top: 0;
        position: absolute;
      }
      .box1_center {
        margin-left: 100px;
        margin-right: 100px;
      }

<div class="box1">
      <div class="box1_left" style="background-color: aquamarine">LEFT</div>
      <div class="box1_center" style="background-color: palevioletred">
        CENTER
      </div>
      <div class="box1_right" style="background-color: aquamarine">RIGHT</div>
    </div>

第二种方式：利用flex布局

   /* box2利用弹性盒子实现 */
      .box2 {
        display: flex;
        justify-content: space-between;
      }
      .box2_left {
        width: 100px;
      }
      .box2_right {
        width: 100px;
      }
      .box2_center {
        flex: 1;
      }

  <div class="box2">
      <div class="box2_left" style="background-color: aquamarine">LEFT</div>
      <div class="box2_center" style="background-color: palevioletred">
        CENTER
      </div>
      <div class="box2_right" style="background-color: aquamarine">RIGHT</div>
    </div>

第三种方式：利用calc方法

1. calc函数的使用方法：
   CSS calc函数可以进行四种运算
   加法和减法的运算符号两边必须有空格,例如:calc(50% - 8px)
   乘法:两个值之间必须有一个为数字
   除法:左边必须为数字
2. 用calc函数来计算中间盒子的宽度 （100% - 左右盒子宽）
3. 左右盒子宽高固定

 /* calc */
      .box3_left,
      .box3_center {
        float: left;
      }
      .box3_right {
        float: right;
      }
      .box3_left,
      .box3_right {
        width: 100px;
      }
      .box3_center {
        width: calc(100% - 200px);
      }

<div class="box3">
      <div class="box3_left" style="background-color: aquamarine">LEFT</div>
      <div class="box3_right" style="background-color: aquamarine">CENTER</div>
      <div class="box3_center" style="background-color: palevioletred">
        RIGHT
      </div>
    </div>

---

---