如何实现双飞翼（圣杯）布局？

奋斗吧程序媛

已于 2022-06-29 06:19:36 修改

阅读量668

点赞数

分类专栏：前端学习文章标签： css 前端

于 2022-06-29 06:04:25 首次发布

本文链接：https://blog.csdn.net/m0_67841039/article/details/125513028

版权

前端同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

学习

9 篇文章 0 订阅

订阅专栏

本文介绍了网页布局中常见的三栏布局——两侧固定，中间自适应的实现方式，包括利用定位、Flex布局和BFC（块级格式化上下文）的解决方案。通过示例代码详细展示了每种方法的实现步骤，帮助开发者理解并掌握这些布局技巧。

摘要由CSDN通过智能技术生成

圣杯布局与双飞翼布局最终要实现的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

效果图：

方法1、利用定位实现两侧固定中间自适应

1.1）父盒子设置左右 padding 值

1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

1.3）中间盒子自适应

具体 CSS 代码：

<!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>
      .father {
        height: 400px;
        background-color: pink;
        position: relative;
        padding: 0 200px;
      }
      .left,
      .right {
        width: 200px;
        height: 300px;
        background-color: yellow;
        position: absolute;
        top: 0;
      }
      .left {
        left: 0;
      }
      .right {
        right: 0;
      }
      .center {
        background-color: blue;
        height: 350px;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

方法2、利用 flex 布局实现两侧固定中间自适应

2.1）父盒子设置 display:flex;

2.2）左右盒子设置固定宽高

2.3）中间盒子设置 flex:1 ;

<!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>
      .father {
        height: 400px;
        background-color: pink;
        display: flex;
      }
      .left,.right {
        width: 200px;
        height: 300px;
        background-color: yellow;
      }
      .center {
        flex: 1;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

方法3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

3.1）左右固定宽高，进行浮动

3.2）中间 overflow: hidden;

<!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>
      .father {
        height: 500px;
        background-color: pink;
      }
      .left {
        float: left;
        width: 200px;
        height: 400px;
        background-color: yellow;
      }
      .right {
        float: right;
        width: 200px;
        height: 400px;
        background-color: yellow;
      }
      .center {
        height: 450px;
        background-color: blue;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="father">
   <!-- 注意:left 和 right 必须放在 center 前面 -->
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
  </body>
</html>