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

伊小小小凡

已于 2022-05-29 14:53:13 修改

阅读量592

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端基础文章标签： css css3 html

于 2022-05-29 14:45:39 首次发布

本文链接：https://blog.csdn.net/qq_43784866/article/details/125030866

web前端基础专栏收录该内容

17 篇文章

订阅专栏

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

使用定位来实现

实现流程：

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>

效果演示

在这里插入图片描述