圣杯布局和双飞翼布局的区别，作用以及优缺点_圣杯布局和双飞翼布局的优缺点-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/118934455

本文介绍了前端布局中的两种经典解决方案——圣杯布局和双飞翼布局，它们都用于实现三栏布局，其中两侧宽度固定，中间自适应。圣杯布局通过设置父元素padding和子元素相对定位实现，而双飞翼布局则在中间栏内添加子元素调整margin。两者各有优劣，圣杯布局避免额外DOM节点但可能在某些情况下变形，而双飞翼布局则稳定但增加了一层DOM结构。这两种布局方式对于前端开发者来说是必备的知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局：

为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

优缺点：

不需要添加dom节点

缺点：如果将浏览器无线放大时，「圣杯」将会「破碎」掉。当middle部分的宽小于left部分时就会发生布局混乱。（middle<left即会变形）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           #bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }          
               #middle{
                float: left;
                width: 100%;     
               height: 500px;
                background:blue;
                
            }
            #left{
                float:left;
                width:180px;
                height:500px;
                margin-left:-100%;
                background: #0c9;
                position: relative;
                left: -180px;
            }
            #right{
                float: left;
                width: 200px;
                height: 500px;
                margin-left: -200px;
                background: #0c9;
                position: relative;
                right: -200px;
            }
    </style>
</head>
<body>
    <div id="bd">
            <div id="middle">middle</div>
            <div id="left">left</div>
            <div id="right">right</div>       
             </div>
                
</body>
</html>

其中：

左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置
#bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }
中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置
#left{
                
                position: relative;
                left: -180px;
            }
中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置
#right{
                
                position: relative;
                right: -200px;
            }

双飞翼布局：

为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

优缺点：

优点：不会像圣杯布局那样变形

缺点是：多加了一层dom节点

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        .mian>div{
            float: left;
        }
        .left{
            width: 200px;
            background-color: cyan;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            background-color: darkorange;
            margin-left: -200px;
        }
        .midden{
            width: 100%;
            background-color: deepskyblue;
        }
        .centent{
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
    <div class="mian">
        <div class="midden">
   <div class="centent">中间</div>
        </div>
        <div class="left">
             左边
        </div>
        <div class="right">右边</div>
    </div>
</body>
</html>

圣杯与双飞翼的区别

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。`