字节面试题：圣杯布局，有几种办法

最新推荐文章于 2023-08-27 19:14:20 发布

前端阳光

最新推荐文章于 2023-08-27 19:14:20 发布

阅读量232

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43964148/article/details/106884506

版权

前端专栏收录该内容

95 篇文章 8 订阅

订阅专栏

圣杯布局是经典的css布局，左右两栏的宽度固定不变，中间那一栏是自适应，下面将用felx、float、position三种方法进行圣杯布局效果图：left和right是定宽，middle是自适应的

body代码：

<body>
  <header></header>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
  </div>
  <footer></footer>

</body>

圣杯布局之flex：

left和right定宽为200px，middle自适应

给middle设置弹性布局display:flex;

left和right定宽200px，middle设置为flex:1;

css代码：


header{
      height: 80px;
      background-color: #cccccc;
    }
    .box{
      height: 200px;
      background-color: yellow;
      display: flex;
    }
    .box .middle{
      height: 200px;
      background: pink;
      flex: 1;
    }
    .box .left{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box .right{
      width: 200px;
      height: 200px;
      background-color: purple;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

圣杯布局之float

将left进行浮动靠左，将right进行浮动靠右

css代码：

header{
      height: 80px;
      background-color: #cccccc;
    }
    .box{
      height: 200px;
      background-color: yellow;
    }
    .box .left{
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .box .right{
      width: 200px;
      height: 200px;
      background-color: purple;
      float: right;
    }
    .box .middle{
      height: 200px;
      background-color: pink;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

position网格

        *{
            margin: 0;
            padding: 0;
            color: black;
            font-size: 45px
        }
        .main div{
            box-sizing: border-box;
        }
        .main{
            width: 100%;
            background: red;
            position: relative;
            padding-left: 200px;
            padding-right: 200px;
            box-sizing: border-box;
        }
        .center{
            width: 100%;
            background: pink
        }
        .left{
            background: yellow ;
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right{
            background: blue ;
            width: 200px;
            position: absolute;
            top: 0;
            right:0
        }
<div class="main">
    <div class="center">z中间</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>