CSS 圣杯布局 / 双飞翼布局的实现

Aldous 发布于2019-04-23 11:40 / 3124人阅读

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。

工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，

这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，

就是两边定宽，中间自适应的布局

1 ，圣杯布局


三栏布局

    center
    left
    right

footer

首先HTML结构是这样的，因为要保证中间的结构先渲染，所以 center 要放在最前面。

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 700px;
}
header , footer{
    background-color: antiquewhite;
    text-align: center;
}
footer{
    clear: both;
}
.container{
    height: 200px;
}
.container .column{
    float: left;
    position: relative;
    height: 100%;
}
.center{
    width: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
}
.right{
    width: 200px;
    background-color: chartreuse;
}

先让它们浮动，并给left 和 right 一个固定宽度， center宽度100%，

footer清除浮动流，结果变成上面这样。

然后我们要把 left 和 right 放上去

先把left 放上去：

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

加上一个 margin-left 为负的自己的宽度，变成了这样：

我们可以看到 center的文字被 left 盖住了，所以给container加一个padding

.container{
    height: 200px;
    padding: 0 200px;
}

变成了这样：

由于加了padding，内容区域变小， left 也跟过来了，所以要给left设置一个left:

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

这样left 就到最左边了， center文字也出来了，同理right

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

最终效果：

2 双飞翼布局（始于淘宝的UED）

和圣杯布局差不多，不同之处在于它们处理中间部分被两边盖住的方法不同

双飞翼布局给center加了一个inner center ，而不是在最外层加container

HTML：

双飞翼布局


    
        center
    

left
right

footer

然后给 inner-center 加margin (只列出关键代码) :

.center .inner-center{
    margin-left: 200px;
    margin-right: 200px;
    height: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}
.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -200px;
}

最终效果和圣杯布局一样。。。。。。

云服务器 GPU云服务器圣杯布局双飞翼布局 android布局的实现 css布局

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

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

CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

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

zqhxuyuan 2019-08-30 14:11 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
CSS 圣杯布局 / 双飞翼布局的实现

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间自适应的布局 1 ，圣杯布局 !--三栏布局-- header 三栏布局 /header div div cent...

LuDongWei 2019-04-22 16:34 评论0 收藏0