两种CSS布局——圣杯布局和双飞翼布局（两侧固定中间宽度自适应）_几种经典的布局,双飞翼,圣杯,中间固定左右自适应-CSDN博客

本文链接：https://blog.csdn.net/weixin_39676449/article/details/89302609

一.概念：

1.圣杯布局和双飞翼布局两者功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

2.圣杯布局来源于文章In Search of the Holy Grail，双飞翼布局来源于淘宝UED遵循特点

3.遵循特点：

（1）两侧宽度固定，中间宽度自适应

（2）中间部分在DOM结构上优先，以便先行渲染

（3）允许三类中的任意一列成为最高列

（4）只需要使用一个额外的

标签

二.圣杯布局：

1.写下HTML代码

2.使三个区域都处于浮动状态，并使main的宽度为父容器的100%

3.为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%，

而右边right的margin-left则为负的其自身的宽度（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

4.为class=“container”的主容器设置左右padding值，使其为以后的侧边栏定位空出位置，padding的值为侧边栏的宽

5.对left和right添加position：relative；然后对它们进行定位，移动到两侧，圣杯布局就初步做完了

三.双飞翼布局：

1.双飞翼布局不仅能满足main处于优先加载的地位，也能更好解决圣杯布局的错乱问题，且css代码简单，缺点是增加了一个标签

2.步骤：

（1）给main里面添加一个内容标签content，并且设置它的左右margin值为左右侧边栏的宽度

（2）去掉main的背景色和高度，双飞翼布局

四.实例代码：

1.圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        #container{
            height: 200px;
            min-width: 400px;
            background-color: green;
            padding: 0px 200px;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .main{
            width: 100%;
            height: 200px;
            float: left;
            background-color: blue;

        }
        .left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="main">中间栏</div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
    </div>
</body>
</html>

2.双飞翼布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        #container{
            min-width: 400px;
            height: 200px;
            background-color: green;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .main-content{
            margin: 0 200px;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }


    </style>
</head>
<body>
    <div id="container">
        <div class="main">
           <div class="main-content">中间栏</div>
        </div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
    </div>
</body>
</html>