圣杯布局和双飞翼布局

ZweiZhao 发布于2019-08-29 16:13 / 2567人阅读

摘要：参考文章同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中，和固定宽度，首先渲染，且自适应宽度。

ps: 参考文章 DotHide同学的“关于圣杯布局”，圣杯布局和双飞翼布局的区别

经典布局 圣杯布局

#header

  
    #center
    #left
    #right
  

  #footer

实现的效果主要在container中，left 和 rgith固定宽度，center首先渲染，且自适应宽度。

    body {
      min-width: 500px;
    }
    #container {
      overflow: auto;        /* BFC */
      padding-left: 180px;
      padding-right: 150px;
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 180px;
      right: 180px; 
      margin-left: -100%
    }
    #right {
      background-color: blue;
      width: 150px; 
      margin-right: -150px;
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

该方案几个注意的点：

center元素位于left和right之前，可以让center先渲染，用户首先看到页面的主要内容。

container （width:100%）包裹着三栏内容，通过padding-left和padding-right为左右两栏腾出空间。

center，left，right都设置一个左浮动（float:left），所以container内部是一个浮动流。

通过给 left 元素设置 margin-left: -100%，使得left移动到container的左上角，在通过position：relative； right: 180px，移动到container的padding-left的位置上去。

给right 元素设置 margin-right: -150px，使得它移动到container的padding-right的位置上去。

ps: margin-left 和 margin-right 利用了浮动流的特性，使得第一行能够同时容纳center，left，right这三个元素。

圣杯布局（flexbox实现）


  #header

  
    #center
    #left
    #right
  

  #footer

    body {
      min-width: 550px;  
    }
    #HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #container {
      display: flex;
      flex: 1;
    }
    #center {
      background-color: #e9e9e9;
      flex: 1;
    }
    #left {
      background-color: red;
      order: -1;
      width: 150px;
    }
    #right {
      background-color: blue;
      width: 150px;
    }
    #header, 
    #footer {
      height: 50px;
      background-color: #c9c9c9;
    }

如果不考虑ie10及以下的浏览器，那么可以使用flex来实现圣杯布局。而且圣杯布局可以通过让container填充高度来使得footer达到一个sticky的效果。
flex兼容性

双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同的地方在于解决中间div内容不被遮挡的思路上面

圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容div置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不则当中间内容。

双飞翼布局的解决方案是：通过再中间元素的内部新增一个div用于放置内容，然后通过左右外边距margin-left和margin-right为左右两栏留出位置。

双飞翼布局多了1个div标签，少用了4个css属性。少用了padding-left，padding-right，左右两个div用相对布局position: relative及对应的right和left，多了margin-left，margin-right。

#header

  
    
      #center
    
    #left
    #right
  

  #footer

    body {
      min-width: 500px;  
    }
    #container {
      overflow: auto;        /* BFC */
    }
    #container .column {
      height: 200px;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #center-content {
      margin-left: 180px;
      margin-right: 150px;
    } 
    #left {
      width: 180px;
      background-color: red;
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;  
      margin-left: -150px; 
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

云服务器 GPU云服务器圣杯布局双飞翼布局样式和布局 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113601.html

圣杯布局和双飞翼布局

摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局圣杯布局dom结构：圣杯布局 ...

yankeys 2019-08-29 13:54 评论0 收藏0
CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...

zqhxuyuan 2019-08-30 14:11 评论0 收藏0
两招搞定三栏布局——圣杯布局、双飞翼布局

摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 评论0 收藏0
浅谈面试中常考的两种经典布局——圣杯与双飞翼

摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...

SwordFly 2019-08-30 13:58 评论0 收藏0
浅谈面试中常考的两种经典布局——圣杯与双飞翼

摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...

刘厚水 2019-08-01 18:35 评论0 收藏0