css双飞翼布局方式

2021-05-26 本文已影响0人 oopsWeb

css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小

这里有四种方式可以实现

一、利用浏览器加载顺序

将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。

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

    .left-box {
      float: left;
      width: 300px;
      height: 900px;
      background: pink;
    }

    .conter-box {
      overflow: hidden;
      height: 900px;
      background: purple;
    }

    .right-box {
      float: right;
      width: 300px;
      height: 900px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="conter-box"></div>
</body>

二、利用css3属性中的calc()计算属性

利用css3中的计算属性让中间自适应的盒子的宽度100% 减去两边固定的宽度分给加上浮动属性


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

    .left-box {
      float: left;
      width: 300px;
      height: 900px;
      background: pink;
    }

    .conter-box {
      float: left;
      width: calc(100% - 600px);
      overflow: hidden;
      height: 900px;
      background: purple;
    }

    .right-box {
      float: right;
      width: 300px;
      height: 900px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="left-box"></div>
  <div class="conter-box"></div>
  <div class="right-box"></div>
</body>

三、利用定位属性

利用定位属性左右设置为两边固定盒子的宽度即可

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

    .left-box {
      float: left;
      width: 300px;
      height: 900px;
      background: pink;
    }

    .conter-box {
      position: absolute;
      top: 0;
      left: 300px;
      right: 300px;
      overflow: hidden;
      height: 900px;
      background: purple;
    }

    .right-box {
      float: right;
      width: 300px;
      height: 900px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="left-box"></div>
  <div class="conter-box"></div>
  <div class="right-box"></div>
</body>

四、利用flex布局

在外部套一个大盒子设置div属性紧贴两边中间自适应属性justify-content: space-between;

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

    .box {
      display: flex;
      justify-content: space-between;
    }

    .left-box {
      width: 300px;
      height: 900px;
      background: pink;
    }

    .conter-box {
      flex: 1;
      height: 900px;
      background: purple;
    }

    .right-box {
      width: 300px;
      height: 900px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left-box"></div>
    <div class="conter-box"></div>
    <div class="right-box"></div>
  </div>