圣杯布局--双飞翼（学习笔记）

最新推荐文章于 2025-06-02 22:57:16 发布

ZHB_Sunday

最新推荐文章于 2025-06-02 22:57:16 发布

阅读量101

点赞数

分类专栏：前端学习笔记文章标签： css3 html5 前端

本文链接：https://blog.youkuaiyun.com/weixin_45608414/article/details/130572753

版权

前端学习笔记专栏收录该内容

13 篇文章

订阅专栏

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

1.1）父盒子设置左右 padding 值

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

1.3）中间盒子自适应

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局--双飞翼</title>
</head>
<style>
  .father {
      height: 400px;
      position: relative;
      background-color: yellow;
      padding: 0 200px;
      text-align: center;
  }
  .left,.right {
      position: absolute;
      width: 200px;
      height: 300px;
      background-color: pink;
      top: 0;
  }
  .left {
      left: 0;
  }
  .right {
      right: 0;
  }
  .center {
      height: 350px;
      background-color: #5b8cff;
  }
</style>

<body>
<div class="father">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">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 name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
</head>
<style>
  .father {
      height: 400px;
      background-color: yellow;
      text-align: center;
      display: flex;
  }
  .left {
      width: 200px;
      height: 300px;
      background-color: pink;
  }
  .right {
      width: 200px;
      height: 300px;
      background-color: pink;
  }
  .center {
      flex: 1;
      background-color: #3d6df8;
  }
</style>

<body>
<div class="father">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
</body>
</html>