Fe-interview: [css] 第1天圣杯布局和双飞翼布局的理解和区别，并用代码实现

Created on 17 Apr 2019 · 31Comments · Source: haizlin/fe-interview

[css] 第1天圣杯布局和双飞翼布局的理解和区别，并用代码实现

css

Source

haizhilin2013

Most helpful comment

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局代码：

<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>

双飞翼布局代码：

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

qingleizhang123 on 17 Apr 2019

👍60 🚀1

All 31 comments

一：
section{height: 100%; overflow: hidden;clear:both; }
.left{ height: 100%;float:left;width:30%;background: #f00; }
.right{ height: 100%;float:right;width:30%; background: #0f0; }
.center{ height: 100%;background: #00f;}

二：
section{ height: 100%;display: flex;justify-content: center;align-items: center;}
.left{ height: 100%;flex-basis: 30%;background: #f00; }
.right{ height: 100%;flex-basis: 30%;background: #0f0; }
.center{ height: 100%;background: #00f; }

三：
section{ height: 100%;position: relative;}
.left{ height: 100%;width: 30%;background: #f00;position: absolute;left:0;top:0; }
.right{ height: 100%;width: 30%;background: #0f0;position: absolute;right:0;top:0; }
.center{ height: 100%;background: #00f;margin:0 30%; }

undefinedYu on 17 Apr 2019

👎11

圣杯布局：
DOM:

    <div id="content">
        <div class="left">left</div>
        <div class="middle">圣杯布局</div>
        <div class="right">right</div>
    </div>
<div id="footer">footer</div>

CSS:

yxkhaha on 17 Apr 2019

发现了大家一个问题，就是大家不怎么会用markdown，这周五可以讲讲了

haizhilin2013 on 17 Apr 2019

👍28 🚀6 😄2

圣杯布局代码：

<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>

双飞翼布局代码：

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

qingleizhang123 on 17 Apr 2019

👍60 🚀1

点评：
知识点：最经典的三栏布局，也称为固比固布局
难点：1颗星
这道题主考查布局的了解，同时也考查margin负值的情况

haizhilin2013 on 18 Apr 2019

https://lhammer.cn/You-need-to-know-css/#/zh-cn/holy-grail-layout?v=1
https://lhammer.cn/You-need-to-know-css/#/zh-cn/double-wing-layout?v=1
这个讲的挺好的

hellojackhui on 6 May 2019

👍5

两者都是为了不让左右俩不遮住middle，经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住middle内容，而双飞翼是middle设置margin，限制内部内容区域，从而左右俩遮的地方不会影响到middle内容

对于三栏布局，modern solution是 flex box/ grid 布局，这两者可以轻松实现 mobile-friendly的方案，也可以控制顺序，middle依然可以先渲染，9012年兼容性不错了，如果APP无视IE，这是优选

这一颗星我拿走啦 😜

@haizhilin2013 感谢大佬整理，最近想tc很有用 👍

btw大佬不打算开个answer repo吗？

tzjoke on 16 May 2019

👍8

理解：简单粗暴点，就是说左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化，总结：固比固
有的人根据float来实现类这样的布局，出现的结果是固固固或者比比比，而不是我们所说的固比固，这个需要注意

SSypp on 18 May 2019

实现的方式比较多吧浮动、定位都可以实现，定位实现

douxiaohou on 4 Jun 2019

flex大法

Splendid-life on 18 Jun 2019

👍5

1.都是解决两边定宽，中间自适应的三栏布局解决方案，中间栏放在文档流前面让浏览器自上而下优先渲染。
2.三栏都设置成左浮动，中间栏100%宽度，左右栏设置具体宽度
3.圣杯布局中间栏左右设置padding，左栏margin-left -100%，然后position：relative;left:-leftWidth;右栏margin-left:-rightWidth；
双飞翼布局中间栏加一个inside容器，内部容器margin-left，margin-right让中间栏内容不被挡住，也给左右栏让出位置。左侧栏只需设置margin-left:-100%，右侧栏margin-left:-rightWidth

zoneasa on 4 Jul 2019

[css] 第1天圣杯布局和双飞翼布局的理解和区别，并用代码实现

两者解决类似的问题。主要解决左右定宽，中间自适应的三栏布局。并且中间栏优先渲染。

圣杯布局

三栏利用 float 和负margin 并列
利用父容器设置 padding 给两边侧栏腾空间

    <div class="wrapper1">
      <div class="main">
        <p>bilibili</p>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

```css

{
padding: 0;
margin: 0;
}
.wrapper1 {
padding: 0 60px 0 30px;
}
.wrapper1 .main {
float: left;
width: 100%;
height: 300px;
background: red;
}
.wrapper1 .left {
float: left;
width: 30px;
margin-left: -100%;
background: blue;
height: 100px;
position: relative;
right: 30px;
}
.wrapper1 .right {
float: left;
width: 60px;
margin-left: -60px;
background: yellow;
height: 200px;
position: relative;
left: 60px;
}

## 双飞翼布局

>三栏利用 `float` 和 负`margin` 并列
>在中间栏加一层容器，利用 `margain` 给两栏腾空间

```html
    <div class="wrapper2">
      <div class="container">
        <div class="main">
          <p>bilibili</p>
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

  * {
    padding: 0;
    margin: 0;
  }
  .wrapper2 {
    min-width: 630px;
  }
  .wrapper2 .container {
    float: left;
    width: 100%;
  }
  .wrapper2 .container .main {
    height: 300px;
    background: red;
    margin: 0 600px 0 30px;
  }
  .wrapper2 .left {
    float: left;
    width: 30px;
    background: blue;
    height: 100px;
    margin-left: -100%;
  }
  .wrapper2 .right {
    float: left;
    width: 600px;
    background: yellow;
    height: 200px;
    margin-left: -600px;
  }

PS：现在用 `flex` 的了

shufangyi on 5 Jul 2019

👍4

简要描述圣杯布局和双飞翼布局的区别和你自己的理解；并实现它们圣杯布局和双飞翼布局都是经典的三栏布局，它们都是解决了，左右两列等宽，中间自适应的布局方式；中间的往往是最优先加载的，所以要把dom放在left和right前面；区别：为了不会造成中间的div的文字被旁边遮挡，圣杯布局采用的是父级div给padding-left和right限制，让字不会被左边和右边挡住；双飞翼布局是采用给中间的div添加一个小div，这个小div使用内边距；圣杯布局优缺点：优点：不需要添加dom节点缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。（maindiv {float: left;}.box {background: yellow;/* 圣杯布局 // padding-left: 200px; // padding-right: 200px; */}.middle {background: red;margin-left: 200px;margin-right: -200px;width: 70%;height: 100px;}.left {background: pink;width: 200px;height: 100px;margin-left: -70%}.right {background: blue;width: 200px;height: 100px;margin-right: -200px}
双飞翼布局

inside{
margin:0 200px 0 180px;
height:100px;
}

1018715564 on 10 Jul 2019

相同

1.圣杯和双飞翼都满足3列中列自适应的布局
2.低于最小宽度都会布局错乱

不同

1.圣杯是用容器包裹三列，双飞翼是3列分开布局
2.圣杯使用position防遮挡，双飞翼css相对简洁只需使用负边距定位即可

圣杯html

<div id="container">
    <div id="center" class="column">1111</div>
    <div id="left" class="column">222</div>
    <div id="right" class="column">333</div>
</div>

圣杯css

body {min-width: 550px;}

container {padding-left: 200px;padding-right: 150px;}

container .column {position: relative;float: left;}

center {width: 100%;}

left {width: 200px; right: 200px;margin-left: -100%;}

right {width: 150px;margin-right: -150px;}

双飞翼html

<div id="container" class="column">
    <div id="center">1111</div>
</div>
<div id="left" class="column">222</div>
<div id="right" class="column">333</div>

双飞翼css

body {min-width: 500px;}

container {width: 100%;}

.column {float: left;}

center {margin-left: 200px;margin-right: 150px;}

left {width: 200px; margin-left: -100%}

right {width: 150px; margin-left: -150px;}

Toeat on 2 Aug 2019

👎2

理解：圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应且优先渲染的布局需求，那么为了自适应且优先渲染，必须要把中间的dom放在最顶端，以保证主要内容能最先被浏览器解析；

而圣杯布局的核心概念就是，通过父容器撑出左右2个 “预留区域”

微信截图_20190818135602.png

圣杯布局代码（在线调试）： https://codesandbox.io/embed/red-platform-vtrct
总结圣杯布局：圣杯布局的核心就是父盒子用padding预留区域，然后center设置宽100%，并且把中左右3个盒子浮动，由于浮动的效果且中间center的宽度沾满了全部，所以左右两个盒子会被“挤下去”，我们需要把2个盒子放到padding给它们预留的地方，左边盒子先使用margin-right负值100%移动到父盒子中心（和中盒子共享第一行，其实就是盖住了中盒子的一半，因为有浮动的原因脱离了文档流）然后再可以使用定位向左移动padding的宽度，就把左盒子移动到了预留的padding中了，右盒子就是直接给一个margin-right负值（父值得值就是预留的padding大小）

双飞翼布局 (在线调试) ： https://codesandbox.io/embed/elated-kilby-6vqjp
总结双飞翼布局：双飞翼布局的核心就是center通过包裹一个父元素，给父元素设置width： 100%和浮动，子元素用margin撑出其他两块的预留位置，然后在left和right上，通过margin-right负值进行移动到对应位置上；

两种布局方式的总结：个人来讲圣杯布局在dom上能够更清爽且更能让人理解，但是在css实现上比较复杂难懂，但是双飞翼布局在dom上没有圣杯那么容易懂，但是在css实现上更让人理解，不难发现，2种布局方式都需要引入一个div，因为（既要设置中间的浮动且可以设置宽度又能计算预留位置），基于双飞翼布局，我们可以通过calc函数（ie9已支持），把多余的div去掉，可以使用calc（100% - 400px）这样的方式就可以自适应啦，但是需要牺牲兼容性，同理还可以用border-box和flex布局，具体移步： https://www.jianshu.com/p/81ef7e7094e8

我的这次总结有少数代码和部分借鉴此处，尤其是给大家提供了不考虑兼容性情况下，如何用额外的方法布局；

1018715564 on 18 Aug 2019

👍12

详解推荐看这篇：
https://www.php.cn/css-tutorial-389529.html
圣杯布局与双飞翼布局主要在解决中栏不被遮挡的思路不同

yuy1guo on 29 Sep 2019

👍2

1、简述：圣杯与双飞翼布局的区别
圣杯布局：将页面划分为头部、内容、底部，内容分为左中右，主要思路是朝着一个方向浮动（float：left），在利用负margin（左栏margin-left：-100%；右栏margin-left：-右宽度像素值）与设置左右栏相对定位，为了避免中间里面内容被拉上来的挡住再对中间内容设置padding来实现。
双飞翼布局：与圣杯类似，其不同点就是给中间内容添加父级容器，这样可以省略对左右栏设置相对定位

RQSA on 3 Oct 2019

圣杯布局和双飞翼布局的理解和区别，并用代码实现

名称

box表示块级框的class
middle表示中间模块
left表示左侧aside
right表示右侧aside

原理相同

先使用float:left;让所有模块称为一个块级框（float概念）；即：让所有模块在一行展示
为了middle模块的自适应，都采用了width:100%;实现
都是用margin-left来把固定模块移动到指定位置

不同

页面横向空间（块级框）利用率不同
这也是圣杯布局存在的最大问题（当middle宽度小于left的时候，布局被破坏）

圣杯-代码

<style>
  /*demo样式，方便查看，非原理代码*/
  header,footer{background:pink;color:#fff;}
  .box{overflow:hidden;}
  .box>div{float:left;color:#fff;}
  .middle{background:purple;}
  .left{background:blue;width:200px;height:300px;}
  .right{background:green;width:300px;height:400px;}
  /*原理+思路代码*/
  .box{padding-left:200px;padding-right:300px;}
  .left,.right{position:relative;}
  .middle{width:100%;}
  .left{margin-left:-100%;left:-200px;}
  .right{margin-left:-300px;left:300px;}
</style>
<header>header</header>
<div class="box">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<footer>footer</footer>

双飞翼-代码

增加了middle_main，提高了middle空间利用率

<style>
  /*demo样式，方便查看，非原理代码*/
  header,footer{background:pink;color:#fff;}
  .box{overflow:hidden;}
  .box>div{float:left;color:#fff;}
  .middle{background:purple;}
  .left{background:blue;width:200px;height:300px;}
  .right{background:green;width:300px;height:400px;}
  /*原理+思路代码*/
  /*.box{padding-left:200px;padding-right:300px;}*/
  /*.left,.right{position:relative;}*/
  .middle{width:100%;}
  .left{margin-left:-100%;
    /*left:-200px;*/
  }
  .right{margin-left:-300px;
    /*left:300px;*/
  }
  /*新增*/
  .middle_main{margin-left:200px;margin-right:300px;}
</style>
<header>header</header>
<div class="box">
  <div class="middle">
    <div class="middle_main">middle</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

减少dom-双飞翼

我们使用box-sizing来减少这个dom

<style>
  /*demo样式，方便查看，非原理代码*/
  header,footer{background:pink;color:#fff;}
  .box{overflow:hidden;}
  .box>div{float:left;color:#fff;}
  .middle{background:purple;}
  .left{background:blue;width:200px;height:300px;}
  .right{background:green;width:300px;height:400px;}
  /*原理+思路代码*/
  /*.box{padding-left:200px;padding-right:300px;}*/
  /*.left,.right{position:relative;}*/
  .middle{width:100%;}
  .left{margin-left:-100%;
    /*left:-200px;*/
  }
  .right{margin-left:-300px;
    /*left:300px;*/
  }
  /*新增*/
  .middle{padding-left:200px;padding-right:300px;box-sizing:border-box;}
</style>
<header>header</header>
<div class="box">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<footer>footer</footer>

Other

使用定位也可以
缺点是aside高度一定在middle的范围内
定位无法支撑起页面高度

liu12fei08fei on 17 Oct 2019

👍2

用flex 可以吗，左右 width 200px；中间 flex: 1 ，最外层， display: flex

yyz841875845 on 18 Dec 2019

1，目前比较好用的方式，是使用flex布局。
2，针对老版本的浏览器，flex可能有兼容问题，而传统的圣杯布局和双飞翼布局，就是解决两边固定，中间自适应的方式进行解决问题。
3，圣杯布局的解决思路：左右两边，以及中间的盒子，使用float：left的方式，进行浮动，同时，让middle中间盒子有一个padding值，left和right盒子通过margin-left属性以及定位的方式，实现效果。
4，他们的区别在于：双飞翼布局会在middle盒子中，再嵌套一层，然后left和right不再需要定位的方式进行平移。只需要margin-left值的设置。

关于双飞翼布局的代码

.box {
height: 500px;
}
.middle-box {
float: left;
padding: 0 100px;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.middle {
background: red;
width: 100%;
height: 100%;
}
.left {
background: blue;
width: 100px;
float: left;
height: 100%;
position: relative;
margin-left: -100%;
}
.right {
background: aquamarine;
width: 100px;
float: left;
height: 100%;
position: relative;
margin-left: -100px;
}

最后：这个题目应该还牵扯到浮动的问题，清除浮动有两种方式：
1，使用overflow:hidden的方式，进行触发bfc，解决浮动。这种方式的缺点是，对于高度固定的盒子，当子元素过多的情况下，会隐藏多余的子元素。
2、使用clear:both，使用伪类选择器的方式，清除浮动。

liwudi on 16 Jan 2020

用flexbox实现圣杯布局，代码很直观，进行2次flex排列：

上中下：flex-direction=column
- 中间部分 flex-grow=1，占据所有剩余空间
- 上下部分 flex-grow=0（默认值，可以不设置）
左中右：flex-direction=row（默认值）
- 中间部分flex-grow=1，占据所有剩余空间；
- 左右边栏flex-grow=0（默认值），基准尺寸 flex-basis=100px；
- 左边栏order=-1（负一），从而排在最前。

参考：https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

jasonzhouu on 11 Mar 2020

👍1

都是三栏布局，圣杯布局三个盒子放在同一个父盒子，需要使用定位；双飞翼布局中间一栏单独放在一个父盒子，其父盒子与左右两栏是兄弟
圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构，而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小

giggleCYT on 26 May 2020

笔记

IOLOII on 4 Jun 2020

作用:

两种布局用于解决的问题是一样的：两边顶宽中间自适应的三栏布局中间栏要放在文档前面以优先渲染

区别:

让中间内容不被遮蔽的手法

圣杯布局：父亲元素padding腾位置
外层父元素设置padding-left & padding-right 让父元素增大
配合margin将元素定位到指定位置再配合相对定位和right和left属性
从而实现中间内容不被遮蔽
双飞翼布局:
元素margin 设置
中间内容使用margin 但是直接设置会导致布局混乱从而让中间内容用一个元素进行包裹后再使用margin 则其不会扰乱元素

实现

圣杯布局

DOM

<body>
  <main>
    <header class="header">
      Header
    </header>
    <section class="container">
      <div class="center column">center</div>
      <div class="left column">Left</div>
      <div class="right column">Right</div>
    </section>
    <footer>
      Footer
    </footer>
  </main>
</body>

样式

  body {
    min-width: 550px;
  }

  header,
  footer {
    height: 50px;
    background-color: #666;
  }

  .container {
    padding-left: 200px;
    padding-right: 150px;
  }

  .column {
    float: left;
    height: 200px;
  }

  .center {
    width: 100%;
    background-color: skyblue;
  }

  .left {
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
    background-color: orange;
  }

  .right {
    width: 150px;
    margin-right: -150px;
    background-color: pink;
  }

  footer {
    clear: both;
  }

双飞翼布局

DOM

<body>
  <main>
    <header class="header">
      Header
    </header>
    <section class="container">
      <div class="wrapper column">
        <div class="center ">center</div>
      </div>
      <div class="left column">Left</div>
      <div class="right column">Right</div>
    </section>
    <footer>
      Footer
    </footer>
  </main>
</body>

样式

  header,
  footer {
    height: 100px;
    background-color: #ccc;
    text-align: center;
  }
  .wrapper {
    width: 100%;
  }

  .column {
    float: left;
    height: 200px;
  }

  .center {
    margin-left: 200px;
    margin-right: 150px;
    height: inherit;
    background-color: skyblue;
  }

  .left {
    width: 200px;
    margin-left: -100%;
    background-color: pink;
  }

  .right {
    width: 150px;
    margin-left: -150px;
    background-color: orange;
  }

  footer {
    clear: both;
  }

OriX0 on 27 Jun 2020

没人用 grid 写一个么 :D

RaoHai on 13 Aug 2020

http://ieun.gitee.io/bolg/pages/7d8fb2/

jejuin on 31 Aug 2020

圣杯布局双飞翼布局

相同点两边定宽中间自适应中间部分优先加载
不同点
圣杯利用padding positive
双飞翼多一层标签

flex方式

css

html,
body {

    margin: 0;
    padding: 0;

}

main {

    display: flex;
    height: 300px;

}

.center {

    order: 0;
    flex: 1;
    background-color: thistle;

}

.left {

    order: -1;
    width: 100px;
    background-color: saddlebrown;

}

.right {

    order: 1;
    width: 100px;
    background-color: navajowhite;

}

<main>
    <div class="center contain">center</div>
    <div class="left contain">left</div>
    <div class="right contain">right</div>
</main>

grid方式
css

body {

    margin: 0;
    padding: 0;

}

main {

    display: grid;
    height: 300px;
    grid-template-columns: 100px auto 100px;
    grid-template-areas: "left center right";

}

.center {

    grid-area: center;
    background-color: thistle;

}

.left {

    grid-area: left;
    background-color: saddlebrown;

}

.right {

    grid-area: right;
    background-color: navajowhite;

}

    <main>
        <div class="center contain">center</div>
        <div class="left contain">left</div>
        <div class="right contain">right</div>
    </main>

githubzml on 23 Oct 2020

.wrapper4 {
            display: grid;
            height: 100px;
            grid-template-columns: 60px 1fr 60px;
        }
 .wrapper4 .main{
            grid-row: 1;
            grid-column: 2;

            border: 1px solid red;
            height: 100%;
        }

 .wrapper4 .left{
            grid-row: 1;
            grid-column: 1;
            border:1px solid blue;
            height: 100%;
        }

.wrapper4 .right{
            grid-row: 1;
            grid-column: 3;
            border:1px solid yellow;
            height: 100%;
        }

Grid 布局其实也不错，也很应景，因为微软已经官宣放弃IE了

maxthonl on 23 Oct 2020

用flex实现，但是我还是没搞明白区别哈哈，看上去我感觉都一样

iceCream0311 on 21 Dec 2020

共同点：

盒子排放顺序都是中、左、右；

<div class="container">
    <div class="center">
      center
    </div>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </div>

中、左、右三个盒子都是左浮动；
中间盒子宽 100%，左右盒子定宽；
左盒子 margin-left: -100%;，右盒子 margin-left: -右盒子宽；

区别：

圣杯布局：利用 container 设置 padding ，压缩盒子内的空间，左右留出空间。左盒子设置 margin-left: -100% 后会和中间盒子重叠，所以还要再用定位向左偏移左盒子宽度。右盒子设置 margin-left: -右盒子宽 会与中间盒子重叠，所以要向右偏移右盒子宽度。
双飞翼布局：inner 设置 margin 后，左盒子设置 margin-left: -100%恰好到左边空出的位置，右盒子margin-left: -右盒子宽恰好到右边空出位置。

理解：
圣杯布局：container 盒子像一个容器一样，设置 padding 为左、右盒子留出空间，余下的是center 部分。
双飞翼布局：center 内再加一个 inner 容器设置 margin，想一只鸟的双翼，为左右盒子留出空间。

luneShaoGM on 15 Jan 2021

圣杯布局和双飞翼布局的共同点:实现左右两栏固定宽度、中间栏自适应的三栏布局
不同点: 圣杯布局存在缺陷,当浏览器屏幕缩小时,中间栏的宽度小于左边栏的宽度,三栏位置会发生错乱,双飞翼布局的出现就是为了解决这个问题
代码实现如下:
1、圣杯布局
css代码:
header, footer {
height: 50px;
background-color: aqua;
}

    .container {
        padding: 0 200px;
    }

    .left {
        position: relative;
        left: -200px;
        float: left;
        margin-left: -100%;
        width: 200px;
        height: 200px;
        background-color: coral;
    }

    .middle {
        position: relative;
        float: left;
        width: 100%;
        height: 200px;
        background-color: teal;
    }

    .right {
        position: relative;
        right: -200px;
        float: left;
        margin-left: -200px;
        width: 200px;
        height: 200px;
        background-color: yellow;
    }

    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }

html代码:

<div class="container clearfix">
    <div class="middle col">中间自适应</div>
    <div class="left col">左边</div>
    <div class="right col">右边</div>
</div>

2、双飞翼布局
css代码:
header, footer {
height: 50px;
background-color: aqua;
}

    .col {
        float: left;
    }

    .left {
        margin-left: -100%;
        width: 200px;
        height: 200px;
        background-color: bisque;
    }

    .middle {
        width: 100%;
        background-color: teal;
    }

    .middle-wrap {
        margin: 0 200px;
        height: 200px;
    }

    .right {
        margin-left: -200px;
        width: 200px;
        height: 200px;
        background-color: yellow;
    }

    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }

html代码:

header

middle

left

right

sunnysyy on 18 Jan 2021

Was this page helpful?

0 / 5 - 0 ratings

Related issues

[vue] 说说你对vue组件的设计原则的理解

haizhilin2013 · 3Comments

[html] 第39天 title与h1、b与strong、i与em的区别分别是什么？

haizhilin2013 · 3Comments

[vue] 你有封装过axios吗？主要是封装哪方面的？

haizhilin2013 · 3Comments

[vue] vue性能的优化的方法有哪些？

haizhilin2013 · 3Comments

[vue] 如果将axios异步请求同步化处理？

haizhilin2013 · 3Comments

Fe-interview: [css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现

Most helpful comment

All 31 comments

[css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现

圣杯布局

PS：现在用 flex 的了

相同

不同

圣杯html

圣杯css

container {padding-left: 200px;padding-right: 150px;}

container .column {position: relative;float: left;}

center {width: 100%;}

left {width: 200px; right: 200px;margin-left: -100%;}

right {width: 150px;margin-right: -150px;}

双飞翼html

双飞翼css

container {width: 100%;}

center {margin-left: 200px;margin-right: 150px;}

left {width: 200px; margin-left: -100%}

right {width: 150px; margin-left: -150px;}

圣杯布局和双飞翼布局的理解和区别，并用代码实现

名称

原理相同

不同

圣杯-代码

双飞翼-代码

减少dom-双飞翼

Other

关于双飞翼布局的代码

笔记

作用:

区别:

让中间内容不被遮蔽的手法

实现

圣杯布局

双飞翼布局

共同点：

区别：

理解：

Related issues

Fe-interview: [css] 第1天圣杯布局和双飞翼布局的理解和区别，并用代码实现

[css] 第1天圣杯布局和双飞翼布局的理解和区别，并用代码实现

PS：现在用 `flex` 的了