圣杯布局与双飞翼布局解析-CSDN博客

本文介绍了圣杯布局和双飞翼布局两种实现三列布局的方法，两者都确保了两侧定宽，中间自适应的效果。圣杯布局利用padding、float、负margin和相对定位，双飞翼布局则采用float和绝对定位配合padding来处理。此外，还提到了使用flex布局实现这一效果的新方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局和双飞翼布局实现的页面效果都是一样的，那就是两侧定宽，中间自适应的三列布局，且优先渲染中间一列，布局上都是中、左、右的顺序，且都是左浮动，区别就是在处理左右两栏遮挡中栏内容的处理方式上不同，圣杯布局是通过中、左、右的外层盒子设置左右padding留出左右栏的位置，而双飞翼布局是通过给中栏外面包裹一层盒子，然后给外层盒子设置左右padding或者给中栏设置左右margin留出左右栏的位置

1、圣杯布局

html结构:

<body>
    <div class="header">我是头部内容</div>
    <div class="container">
        <div class="middle">我是中间内容</div>
        <div class="left">我是左侧内容</div>
        <div class="right">我是右侧内容</div>
    </div>  
    <div class="footer">我是底部内容</div>
</body>

1.1 padding+float+负margin+相对定位

 <style>
        *{                              /*清除默认外边距和内边距*/
            margin: 0;
            padding: 0;
        }
        .header,.footer{               /* 底部和头部，宽度设置100%，高度为固定高度 */
            width: 100%;
            height: 50px;
            text-align:center;
            line-height: 50px; 
        }
        .header{
            background-color: orange;
        }
        .footer{
            background-color:black;
            color: #FFF;
        }
         /* 1、左中右三列是包在一个大容器container内*/
        .container{          
            height: 600px;
          /* 6、此时左右其实是遮盖了中间部分的两侧，给container设置左右padding挤出位置 */ 
            padding: 0 200px;   
        }
        .container div{
         /* 2、三列的顺序为中、左、右，且全部左浮动*/
            float: left;
            height: 600px;
            text-align: center;
        }
        .container .middle{              
            background-color: red;
             /* 3、设置中间部分宽度为100%，那么左和右就被挤到下一行了*/ 
            width: 100%;
        }
        .container .left{  
            background-color: green;
            width: 200px;
             /* 4、给左设置margin-left:-100%,那么左就和中在一行，而且在最左边*/
            margin-left: -100%;
             /* 7、container设置padding后，左边被挤向右边，所以使用相对定位向左移动*/
            position:relative;   
            left: -200px;
        }
        .container .right{ 
            background-color: blue;
            width: 200px;
            /* 5、给右设置margin-left:-200px,那么左就和中在一行，而且在最右边*/
            margin-left: -200px;
           /* 8、container设置padding后，右边被挤向左边，所以使用相对定位向右移动*/
            position:relative;
            right:-200px
        }
    </style>

1.2 padding+绝对定位

<style>
        
      div {
      text-align: center;
      font-style: 30px;
    }
    .header {
      width: 100%;
      background-color: red;
      height: 50px;
      line-height: 50px;
    }
    /* 给左右栏留出位置 */
    .container {
      padding: 0 210px;
      position: relative;
    }
    .container div {
      height: 400px;
    }
    .container .middle {
      width: 100%;
      background-color: green;
    }
    /* 将左栏定位到左边 */
    .container .left {
      width: 200px;
      background-color: orange;
      position: absolute;
      top: 0;
      left: 0;
    }
    /* 将右栏定位到右边 */
    .container .right {
      width: 200px;
      background-color: blue;
      position: absolute;
      top: 0;
      right: 0;
    }
    .footer {
      width: 100%;
      height: 50px;
      background-color: #000;
      color: #fff;
      line-height: 50px;
    }
    </style>

1.3 flex布局+order属性（flex-grow、flex-shrink）

 <style>
   .header {
      width: 100%;
      background-color: red;
      height: 50px;
      line-height: 50px;
    }
    /* 给左右栏留出位置 */
    .container {
      display: flex;
    }
    .container div {
      height: 400px;
    }
    .container .middle {
     /*
     设置子项分配flex方向剩余空间的相对比例，设为1，即表示lfex方向空间剩余时，
     middle占剩余空间的 1/所有子元素flex-grow(默认为0)之和
     但是这里只给middle设置flex-grow为1，其他不设置，默认为0
     也就是flex方向空间剩余时，middle占了所有剩余空间，也就是中栏宽度自适应
     */
      flex-grow:1;
      background-color: green;
    }
    .container .left {
      width: 200px;
      /* 
      flex方向空间不足时项目的缩小比例，默认为1，即如果空间不足，该项目在flex方向的尺寸
      将缩小 
      (所有子项在flex方向尺寸之和-父盒子宽度）* (当前项目flex-shrink值/所有项目flex-shrink值之和)
       */
      /*flex-shrink属性为0，表示flex方向空间不足时，该项目不缩小 */
      /*这里给左右栏设置flex-shrink: 0是为了固定左右栏宽度不变*/
      flex-shrink: 0;
      background-color: orange;
      /*左栏在中间，需要移动到左边*/
      /* 利用flex的order，改变左栏的位置*/
      /* 该属性值值越小，位置越靠前 ,默认为0 */
      order: -1;
      margin-right: 10px;
    }
    .container .right {
      width: 200px;
      flex-shrink: 0;
      background-color: blue;
      margin-left: 10px;
    }
    .footer {
      width: 100%;
      height: 50px;
      background-color: #000;
      color: #fff;
      line-height: 50px;
    }
</style>

2、双飞翼模型

  <div class="box">
      <div class="header">头部</div>
      <div class="content">
        <div class="center_box">
          <div class="center">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
      </div>
      <div class="footer">脚部</div>
    </div>

2.1 float+padding+负margin

    <style>
       .header {
      width: 100%;
      background-color: red;
      height: 50px;
      line-height: 50px;
    }
    .content > div {
      float: left;
      height: 400px;
    }
     
    /* 方式1：（不推荐）用center外层的盒子的padding挤出左右栏的位置
    /*.content .center_box {
      width: 100%;
      /*注意如果width为100%，且使用了padding就要添加这个属性，否则页面会被拉长出现横向滚动条
      box-sizing: border-box; 
      padding: 0 210px;
      background-color: pink;
    }
    .content .center_box .center {
      height: 400px;
      background-color: green;
    } /*
    /*方式二：(推荐)给center设置左右margin留出左右栏的位置，且center_box盒子不用改为border-box*/
    .content .center_box {
      width: 100%;
      background-color: pink;
    }
    .content .center_box .center {
      height: 400px;
      margin: 0 210px;
      background-color: green;
    }
    /*-------------------------*/
    .content .left {
      width: 200px;
      background-color: orange;
      margin-left: -100%;
    }
    .content .right {
      width: 200px;
      background-color: blue;
      margin-left: -200px;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      background-color: #000;
      color: #fff;
      line-height: 50px;
    }
</style>

2.2 绝对定位+padding

<style>
.header {
      width: 100%;
      background-color: red;
      height: 50px;
      line-height: 50px;
    }
    .content {
      position: relative;
    }
    .content > div {
      float: left;
    }
    /* 用center外层的盒子的padding挤出左右栏的位置 */
    .content .center_box {
      width: 100%;
      box-sizing: border-box;
      padding: 0 210px;
      background-color: pink;
    }
    .content .center_box .center {
      height: 500px;
      background-color: green;
    }
    /* 使用绝对定位将左栏定位到最左侧 */
    .content .left {
      height: 400px;
      width: 200px;
      background-color: orange;
      position: absolute;
      top: 0;
      left: 0;
    }
    /* 使用绝对定位将右栏定位到最右侧 */
    .content .right {
      width: 200px;
      height: 400px;
      background-color: blue;
      position: absolute;
      top: 0;
      right: 0;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      background-color: #000;
      color: #fff;
      line-height: 50px;
    }
.header {
      width: 100%;
      background-color: red;
      height: 50px;
      line-height: 50px;
    }
    .content {
      position: relative;
    }
    .content > div {
      float: left;
    }
    /* 用center外层的盒子的padding挤出左右栏的位置 */
    .content .center_box {
      width: 100%;
      box-sizing: border-box;
      padding: 0 210px;
      background-color: pink;
    }
    .content .center_box .center {
      height: 500px;
      background-color: green;
    }
    /* 使用绝对定位将左栏定位到最左侧 */
    .content .left {
      height: 400px;
      width: 200px;
      background-color: orange;
      position: absolute;
      top: 0;
      left: 0;
    }
    /* 使用绝对定位将右栏定位到最右侧 */
    .content .right {
      width: 200px;
      height: 400px;
      background-color: blue;
      position: absolute;
      top: 0;
      right: 0;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      background-color: #000;
      color: #fff;
      line-height: 50px;
    }
</style>