圣杯布局

最新推荐文章于 2023-08-27 18:45:49 发布

薛中然

最新推荐文章于 2023-08-27 18:45:49 发布

阅读量195

点赞数

分类专栏： CSS3 布局方式 HTML5

CSS3 同时被 3 个专栏收录

13 篇文章

订阅专栏

HTML5

13 篇文章

订阅专栏

布局方式

5 篇文章

订阅专栏

本文详细介绍了一种常用的网页布局方式——圣杯布局。通过设置负的外边距和相对定位等技巧，实现左侧和右侧固定宽度，中间自适应的布局效果。文章提供了完整的HTML和CSS代码示例。

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

圣杯布局

1.设置基本样式

为了高度保持一致给left main right都加上min-height:130px。

2.圣杯布局是一种相对布局，首先设置父元素container的位置：
　

实现效果是左右分别空出200px和300px区域，效果如图：

3.将主体部分的三个子元素都设置左浮动

出现了如下情况，怎么办，别着急慢慢来：

4.设置main宽度为width:100%,让其单独占满一行

5.设置left和right 负的外边距

　　我们的目标是让left、main、right依次并排，但是上图中left和right都是位于下一行，这里的技巧就是使用负的margin-left:
　　

　　负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行。关于负的margin的应用也是博大精深，这里肯定是不能详细介绍了。
　　设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了main部分（仔细观察下图，你会发现main里面的字“main”不见了，因为被left遮住了），left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾。

6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

至此，我们完成了三列中间自适应的布局，也就是传说中的圣杯布局：完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" /> 
    <title>Document</title>
    <style>
        .box{
            position: relative;
            float: left
        }
        .container{
            padding: 0 200px 0 300px
        }
        .left{
            width: 300px;
            height: 300px;
            background:red;
            margin-left: -100%;
            left: -300px;

        }
        .right{
            width: 200px;
            height: 300px;
            background:rgb(40, 14, 185);
            margin-left: -200px;
            right: -200px;
        }
        .main{
            width: 100%;
            height: 300px;
            background-color: green
        }
    </style>
</head>
<body>
 <div class="container">
     <div  class="main box"></div>
     <div class="left box"></div>
     <div class="right box"></div>
 </div>
</body>
</html>