资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往

首页/文章专栏/布局

布局

wangtdgoodluck 发布于2019-08-29 11:29 / 2038人阅读

摘要：双飞翼布局是对圣杯布局的优化，先实现中间最重要的身体部分，再实现翅膀，所以叫双飞翼布局。参考资料跟这些特性相互叠加后会怎么样经典布局之双飞翼布局

‘display’、’position’ 和 ‘float’ 的相互关系

圣杯布局和双飞翼 什么是圣杯布局和双飞翼布局？

圣杯布局和双飞翼布局可实现两边宽度固定，中间宽度自适应，外部高度为三者中的最高高度的三列布局，当然，由扩展性这样的布局不仅仅只是三列，

圣杯布局

因为现有的技术全部都有缺点，要找到一种好的实现方法就像找到圣杯一样难。

双飞翼布局

是对圣杯布局的优化，先实现中间最重要的身体部分，再实现翅膀，所以叫双飞翼布局。

早期用table实现，现在不用了，因为table要等到页面加载完之后才渲染。table有一些略根性，这个我并不是很清楚，总之table并不推荐。

布局实现思路

1.因为中间的主体内容最重要，所以先加载它，所以html中middle放在最前面
2.他们三个要对其，先将middle设为全宽，让left和right浮动上去,并且一个在左一个在右。
3.让middle自适应宽度
4.外部高度为三者最高的高度

实现圣杯布局

先给出html的结构,为了方便观察，这里也给出了头部和脚部:



    我是头部


    
        我是中间
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
    
    
        我是左
    
    
        我是右
    


    我是底部，版权所有

实现过程

首先给出相应的宽度和背景值，便于观察

header{
    height: 150px;
    background-color: #0099FF;
}
article{
    /*height值只是为了方便看效果*/
    height: 300px;
    background-color: #924652;
}
footer{
    height: 150px;
    background-color: #CCCC33;
}
article .middle{
    background-color: darksalmon;
}
article .left{
    background-color: #65cca1;
    width: 150px;
}
article .right{
    background-color: #f786ff;
    width: 200px;
}

先把中middle浮动上去,给他一个全宽，原有基础上添加

.middle{
    float:left;
    width:100%;
}

把left放到middle左边，原有基础上添加

.left{
    float:left;
    margin-left:-100%；
}

把right放到middle右边，原有基础上添加

.right{
    float:left;
    /*这里的150px为right的宽度*/
    margin-left:-150px； 
}

middle自适应，原有基础上添加

article{
    padding-left: 150px;
    padding-right: 100px;
}
article .left{
    position: relative;
    left: -150px;
}
article .right{
    position: relative;
    left: 100px;
}

外部高度为三者中最高，原有基础上添加为(不想全部为最大的高度，middle，right，left谁最高设谁的样式即可)

article .middle{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .left{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article{
    overflow: hidden;
}

圣杯布局全部代码：

*{
    margin: 0;
    padding: 0;
}
header{
    height: 150px;
    background-color: #0099FF;
}
article{
    /*height: 300px;*/
    background-color: #924652;
    padding-left: 150px;
    padding-right: 100px;
    overflow: hidden;
}
footer{
    height: 150px;
    background-color: #CCCC33;
}
article .middle{
    background-color: darksalmon;
    float: left;
    width: 100%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .left{
    background-color: #65cca1;
    float: left;
    width: 150px;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
article .right{
    background-color: #f786ff;
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    left: 100px;
}

实现双飞翼布局 有了圣杯布局为什么还要有双飞翼布局

圣杯布局是有一定局限性的，在middle居中时，限定了left和right必为position：relative才合适，如果它们不为relative，整个布局就费了。

怎样解决圣杯布局的局限性？

关键是给middle内部添加一层，作为安全层。

修改html。为middle加个内部层，原有基础上添加


    
        我是中间
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐
        元素多多看对齐

实现过程

前面left和right浮动上来的过程与圣杯一致，不同的是middle自适应，将圣杯布局的middle自适应步骤改为：

.inner{
    margin-left: 150px;
    margin-right: 150px;
}

外部高度为三者最高的步骤类似圣杯布局，将middle出的设置改为inner的即可

双飞翼布局全部代码

*{
    margin: 0;
    padding: 0;
}
header{
    height: 150px;
    background-color: #0099FF;
}
article{
    /*height: 300px;*/
    background-color: #924652;
    overflow: hidden;
}
footer{
    height: 150px;
    background-color: #CCCC33;
}
article .middle{
    background-color: darksalmon;
    float: left;
    width: 100%;
}
article .left{
background-color: #65cca1;
    float: left;
    width: 150px;
    height: 16px;
    margin-left: -100%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
article .right{
background-color: #f786ff;
    float: left;
    width: 200px;
    height: 16px;
    margin-left: -200px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.inner{
    margin-left: 150px;
    margin-right: 150px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

不仅仅是三列 怎样实现两列布局？

float:left便可轻松实现，其中left作为主体部分

怎样实现三列布局？

圣杯布局和双飞翼布局便是三列布局

怎样实现多列布局？

在三列布局的基础上，将最后一列不断扩张成两列布局或者三列布局即可实现

思考：

1.圣杯布局和双飞翼布局一步步实现的思路
2.float的实质
以float：left为例，假设a在b前面，将b浮动到左边，看起来像是把a挤到了它后面，其实它更像是在a中插入了文字，它是堆叠在了a上，给b设一定的透明度，给a加个颜色，会发现b的下面是a。
3.float使用时的一个注意事项
只有宽没有高的float并不能达到占位的目的，它并不能挤压到后面的元素
4.float最多能在垂直方向上浮动多远
元素float之后，占据文档流中能占的位置，能占的位置便是，最接近的前一行非浮动元素的后面
5.使用margin-left超视口进行折行控制时，向左的折动距离越大，当前行一点点向视口外部缩进，当缩进为自己宽度并渐渐增大时，会一下子全部出现在上一行中并渐渐移动。

参考资料

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
CSS 经典布局之双飞翼布局

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

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

实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
圣杯布局和双飞翼布局

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

yankeys 2019-08-29 13:54 评论0 收藏0
CSS三栏布局——多种方法详解，比较兼容性

摘要：题目假设高度已知，请写出三栏布局，其中左栏右栏宽度各为，中间自适应三栏布局的种方案这是一道经典的面试题，下面记录了布局的种方法。题目:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应. 三栏布局的5种方案这是一道经典的面试题，下面记录了css布局的5种方法。三栏布局 * { margin: 0; ...

马忠志 2019-08-30 10:57 评论0 收藏0