三栏布局--圣杯与双飞翼

Posted 炎泽

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局--圣杯与双飞翼相关的知识，希望对你有一定的参考价值。

圣杯布局

特点: 

1、按照中间部分、左部分、右部分的顺序排列；

2、容器的子元素都是浮动布局 float: left；

3、容器设置padding为两侧腾出空间；

4、中间部分宽度为100%；

5、两侧都是相对定位，左部分margin: -100%, left: 负自身宽度， 右部分margin: 负自身宽度， right: 负自身宽度。

eg:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圣杯</title>
        <style type="text/css">
            .bd {
                height: 300px;
                padding: 0 100px;
            }
            .bd >*{
                height: 300px;
                float: left;
            }
            .main {
                width: 100%;
                background: red;
            }
            .left {
                width: 100px;
                background: yellow;
                margin-left: -100%;
                left: -100px;
                position: relative;
            }
            .right {
                width: 100px;
                background: blue;
                margin-left: -100px;
                right: -100px;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="bd">
            <div class="main"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>
View Code

效果如下:

但这种布局有一个重要的缺陷，就是当main小于两侧时，会发生崩坏

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.双飞翼布局

双飞翼布局算是对圣杯布局的一种改进

特点: （灰白色为不需要的特性）

1、按照中间部分、左部分、右部分的顺序排列；

2、容器的子元素都是浮动布局 float: left；

3、容器设置padding为两侧腾出空间；

4、中间部分宽度为100%；

5、两侧都是相对定位，左部分margin: -100%, left: 负自身宽度， 右部分margin: 负自身宽度， left: 负自身宽度；

6.中间部分添加子元素，这是内容区域。

eg:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
        <style type="text/css">
            .bd {
                height: 300px;
            }
            .bd >*{
                height: 300px;
                float: left;
            }
            .main {
                width: 100%;
                background: red;
            }
            .content {
                margin: 0 100px;
                height: 100%;
            }
            .left {
                width: 100px;
                background: yellow;
                margin-left: -100%;
            }
            .right {
                width: 100px;
                background: blue;
                margin-left: -100px;
            }
        </style>
    </head>
    <body>
        <div class="bd">
            <div class="main">
                <div class="content"></div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>
View Code

这样就不会发生崩坏问题，而且布局更为简单。

 

以上是关于三栏布局--圣杯与双飞翼的主要内容，如果未能解决你的问题，请参考以下文章

圣杯布局和双飞翼三栏布局

负边距三栏布局（圣杯布局双飞翼布局）

使用‘圣杯布局’‘双飞翼布局’来解释自适应的三栏水平布局

三栏布局的三个典型方法（圣杯双飞翼flex）

圣杯布局，双飞翼布局详解

三栏布局实现方式优缺点总结（圣杯和双飞翼重点）