圣杯布局和双飞翼布局

yankeys 发布于2019-08-29 13:54 / 1190人阅读

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

解决的问题

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

圣杯布局

圣杯布局dom结构：

    
        圣杯布局
        
            
                1.这是三栏布局的圣杯布局解决方案； 
                2.这是三栏布局的圣杯布局解决方案； 
                3.这是三栏布局的圣杯布局解决方案； 
                4.这是三栏布局的圣杯布局解决方案； 
                5.这是三栏布局的圣杯布局解决方案； 
                6.这是三栏布局的圣杯布局解决方案； 
                7.这是三栏布局的圣杯布局解决方案； 
                8.这是三栏布局的圣杯布局解决方案；
                9.这是三栏布局的圣杯布局解决方案；

1.首先让三个列都向左浮动：

    .layout.grail .left-center-right>div {
        float: left;
    }

2.把左右两个列提到和中间列同行（margin作用的相关解释：http://www.cnblogs.com/2050/a...）：

        .layout.grail .left {
            margin-left: -100%;
        }
        .layout.grail .right {
            margin-left: -300px;
        }

3.上面中间列被遮挡了，这时在这三列的父元素上加padding值（疑问：为什么这里不用margin呢？试了下效果也可以的~）：

    .layout.grail .left-center-right {
        padding: 0 300px;
    }

4.这时左右两列也跑上来了，通过绝对定位relative让它们回到正确的位置：

    .layout.grail .left {
        position: relative;
        left: -300px;
    }
    .layout.grail .right {
        position: relative;
        right: -300px;
    }

此时效果已经完成了，只是在窗口变小到限定值时布局会乱掉，那么给它加上一个宽度限制：

    .layout.grail .left-center-right {
        min-width: 304px;
    }

完整的CSS代码如下：

双飞翼布局

双飞翼dom结构：

    
        双飞翼布局
        
            
                
                    1.这是三栏布局的双飞翼布局解决方案； 
                    2.这是三栏布局的双飞翼布局解决方案； 
                    3.这是三栏布局的双飞翼布局解决方案； 
                    4.这是三栏布局的双飞翼布局解决方案； 
                    5.这是三栏布局的双飞翼布局解决方案； 
                    6.这是三栏布局的双飞翼布局解决方案； 
                    7.这是三栏布局的双飞翼布局解决方案； 
                    8.这是三栏布局的双飞翼布局解决方案；
                    9.这是三栏布局的双飞翼布局解决方案；

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局：

    .layout.ued .left-center-right>div {
        float: left;
    }
    .layout.ued .center {
        background: yellow;
    }
    .layout.ued .left {
        margin-left: -100%;
    }
    .layout.ued .right {
        margin-left: -300px;
    }

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局为了中间div内容不被遮挡，将父容器设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div；而双飞翼布局为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

    .layout.ued .wrap {
        margin-left: 300px;
        margin-right: 300px;
    }

完整的CSS代码：

转载链接：https://www.zhihu.com/questio...

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

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

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

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
圣杯布局和双飞翼布局

摘要：参考文章同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中，和固定宽度，首先渲染，且自适应宽度。 ps: 参考文章 DotHide同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 评论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