css中圣杯布局-优快云博客

本文深入解析圣杯布局，一种使中间部分自适应宽度而两侧固定宽度的三列布局技巧。通过浮动、负边距和相对定位实现，无需额外标签，适用于网页设计中优先渲染关键内容的场景。

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

圣杯布局：圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，也就是在html文档中，中间的部分
要写在左右布局之前。
圣杯布局需要用到的东西
1.圣杯布局，需要用到浮动，负边距，相对定位（相对自身定位relative），这种方法不需要添加额外的标签
2.关于margin或者padding单位是百分比的时候，它是基于父级元素或者包含的宽度来进行计算。

 <style>
     .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相对于包含快的宽度*/
        position:relative;
        left:-150px;
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
        position:relative;
        right:-190px;
    }
    .bd{
        padding-left:150px;
        padding-right:190px;
    }
    </style>
</head>
<body>
        <div class="bd">
                <div class="main">Main</div>
                <div class="left">Left</div>
                <div class="right">Right
                </div>
            </div>
</body>