双飞翼模型的四种方式

两翼齐飞又叫双飞翼布局，是一个三列布局，中间自适应宽度，两翼固定宽度的一种布局模型。

1.三个盒子左浮动浮动,并且给左右两个盒子设为固定值.使用css中的width:calc(100% - 固定值)

      css部分

<style>
    *{
      padding: 0;
      margin: 0;
    }
    nav,aside,p{
      float: left;
      background-color: red;
      width: 200px;
      height: 50px;
    }
    aside{
      background-color: aqua;
      width: calc(100% - 400px);
    }
  </style>

        body部分

<nav>我是左边部分</nav>
<aside>我是中间部分</aside>
<p>我是右边部分</p>

2.让两边盒子分别左右浮动,中间盒子左浮动.

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    nav {
      float: left;
      background-color: red;
      width: 200px;
      height: 50px;
    }

    p {
      float: right;
      height: 50px;
      background-color: red;
      width: 200px;
    }

    aside {
      float: left;
    }

    header {
      overflow: hidden;
      height: 50px;
      background-color: aqua;
      box-sizing: border-box;
    }
    div {
      padding-left: 210px;
      padding-right: 210px;
    }
  </style>

   <header>
    <nav>我是左边部分</nav>
    <div>
      <aside>
        我是中间部分
      </aside>
    </div>
    <p>我是右边部分</p>
  </header>

3.父盒子使用display:flex,中间盒子使用flex-grow:1.

 <style>
    *{
      padding: 0;
      margin: 0;
    }
    header{
      display: flex;
    }
    nav,p{
      background-color: red;
      height: 30vh;
      width:100px;
    }
    aside{
      background-color: aqua;
      height: 30vh;
      flex-grow: 1;
    }
  </style>
  <header>
    <nav>我是左边部分</nav>
    <aside>我是中间部分</aside>
    <p>我是右边部分</p>
  </header>

3.三个盒子,其中一个盒子自适应宽度.两盒子给定固定宽度,并且绝对定位,分别固定到左右两边。不占位置,对自适应盒子设置内边距为上一个盒子的宽度,使内容不会被覆盖.

 <style>
    * {
      padding: 0;
      margin: 0;
    }

    nav {
      position: absolute;
      background-color: red;
      width: 200px;
      height: 50px;
    }

    p {
      position: absolute;
      background-color: red;
      right: 0px;
      top: 0px;
      width: 200px;
      height: 50px;
    }

    header {
      height: 50px;
      background-color: aqua;
      padding-left: 210px;
      padding-right: 210px;
    }
  </style>

 <nav>我是左边部分</nav>
  <header>
    <aside>我是中间部分</aside>
  </header>
  <p>我是右边部分</p>