关于圣杯布局和双飞翼布局

dantezhao 发布于2019-08-30 15:52 / 1580人阅读

摘要：圣杯布局左宽度为右边宽度为效果如图双飞翼布局效果如图两种布局的区别这两种布局实现的都是两边固定宽度，中间自适应，中间栏放在最前面优先渲染。不同的是，双飞翼布局多创建一个包裹的，去掉了相对定位，相对少写一些。

圣杯布局
html：


    center
    left
    right

css:

#container {
            padding: 0 100px 0 200px;/*左宽度为200px 右边宽度为100px*/
}
.col {
    float: left;
    position: relative;
    height: 300px;
}
#center {
    width: 100%;
    background: #eee;
}
#left {
    width: 200px;
    background: blue;
    margin-left: -100%;
    right: 200px;
}
#right {
    width: 100px;
    background: red;
    margin-right: -100px;
}

效果如图：

双飞翼布局
html：


    
        center
    
    left
    right

css:

.col {
            float: left;
            height: 300px;
}
#center {
    width: 100%;
    background: #eee;
}
#left {
    width: 200px;
    background: blue;
    margin-left: -100%;
}
#right {
    width: 100px;
    background: red;
    margin-left: -100px;
}
#center .wrap {
    margin: 0 100px 0 200px;
}

效果如图：

两种布局的区别
这两种布局实现的都是两边固定宽度，中间自适应，中间栏放在最前面优先渲染。
不同的是，双飞翼布局多创建一个包裹的div，去掉了相对定位，css相对少写一些。
个人认为圣杯布局结构更简洁，平常工作中就看大家自己的选择了。

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

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

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

关于圣杯布局和双飞翼布局

摘要：圣杯布局左宽度为右边宽度为效果如图双飞翼布局效果如图两种布局的区别这两种布局实现的都是两边固定宽度，中间自适应，中间栏放在最前面优先渲染。不同的是，双飞翼布局多创建一个包裹的，去掉了相对定位，相对少写一些。圣杯布局html： center left right css: #container { padding: 0 100px ...

qianfeng 2019-08-01 16:18 评论0 收藏0
聊聊为什么淘宝要提出「双飞翼」布局

摘要：于是，淘宝软对针对圣杯的缺点做了优化，并提出双飞翼布局。综合来看，不管的大小高低如何，双飞翼布局都能正常显示，嗯确实很优秀。锤子和钉子综上所见，双飞翼布局更胜一筹。 showImg(https://segmentfault.com/img/bVYtjF?w=922&h=561); 前言突然有一天，脑之里不知怎地蹦出一个词，「双飞翼」，这是很久以前的淘宝提出的一种三栏布局优化方案，然而...

junbaor 2019-08-29 13:47 评论0 收藏0
圣杯布局和双飞翼布局

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

ZweiZhao 2019-08-29 16:13 评论0 收藏0
CSS三栏布局的经典实现方法

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

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

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

Forelax 2019-08-02 14:31 评论0 收藏0