圣杯布局 vs 双飞翼布局

microelec 发布于2019-08-29 13:51 / 1967人阅读

摘要：圣杯布局实现原理代码中，部分首先要放在的最前部分，然后是，将三者都设置因为相对定位后面会用到设置占满一行此时占满一行，所以要把拉到所在行的最左边，使用这时拉回到所在行的最左边，但会覆盖内容的左端，要把内容拉出来，所以在外围加上内容拉出来

圣杯布局 实现原理

html代码中，middle部分首先要放在container的最前部分，然后是left，right

将三者都设置 float:left, position:relative (因为相对定位后面会用到）

middle设置 width:100% 占满一行

此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%

这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px

middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px

同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px

实现代码

双飞翼布局 实现原理

html代码中，middle部分首先要放在container的最前部分，然后是left，right

将三者都设置 float:left

middle设置 width:100% 占满一行

此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%，同理right使用 margin-left:-200px

此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div -- middle_content, 然后设置 margin:0 210px

实现代码




    
    双飞翼布局
    


    
        头部
        
            
                
                    middle_content
主内容区域
                
            
            
                left
左侧边栏区域
            
            
                right
右侧边栏区域
            
        
        底部

云服务器 GPU云服务器圣杯布局双飞翼布局 div布局布局html 排版布局

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

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

圣杯布局 vs 双飞翼布局

摘要：圣杯布局实现原理代码中，部分首先要放在的最前部分，然后是，将三者都设置因为相对定位后面会用到设置占满一行此时占满一行，所以要把拉到所在行的最左边，使用这时拉回到所在行的最左边，但会覆盖内容的左端，要把内容拉出来，所以在外围加上内容拉出来圣杯布局实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 将三者都设置 float:l...

alin 2019-08-01 18:02 评论0 收藏0
那些年，奇妙的圣杯与双飞翼，还有负边距

摘要：奇妙的圣杯与双飞翼相信很多人和我在学习前端差不多的时候就听说过了圣杯布局与双飞翼布局。他往前移动之后，文档流也会跟着移动元素宽度负边距负边距可以增加元素的宽度，对于没有的元素，负边距可以加宽他们。 [TOC] 没错，题目就是模仿《那些年，我们一起清除过的浮动》而来的。奇妙的圣杯与双飞翼相信很多人和我在学习前端差不多的时候就听说过了圣杯布局与双飞翼布局。关于取名无非是觉得长得像圣杯，...

tianhang 2019-08-30 12:50 评论0 收藏0
圣杯布局和双飞翼布局

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

yankeys 2019-08-29 13:54 评论0 收藏0
两招搞定三栏布局——圣杯布局、双飞翼布局

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

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

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

zqhxuyuan 2019-08-30 14:11 评论0 收藏0