圣杯布局 和 双飞翼布局

门卫大爷
112 阅读5分钟

圣杯布局和双飞翼布局是面试经常问到的一个问题。在之前的学习和工作过程中没有特别留意过。今天来看一下他们的具体实现思路。

圣杯布局

圣杯布局是什么

圣杯布局就不过多讲解了，目的就是解决这种布局要求：页面分为左中右三部分，左右两部分宽度固定且在页面的左右两侧，中间部分宽度自适应。中间部分比较重要，要求需要先渲染。

圣杯布局的实现方式

先看代码

html代码：

中间部分要求先渲染，所以放在left和right的前面。

    <div id="content">
        <div id="middle">midde</div>
        <div id="left"></div>
        <div id="right"></div>
    </div>

最终css代码：

        #content{
            height: 100px;
            padding: 0 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
            float: left;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
            float: left;

            margin-left: -100%;
            
            position: relative;
            left: -100px;

        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
            float: left;
            
            margin-left: -100px;

            position: relative;
            left: 100px;
        }

基本思路

middle，left，right三个都左浮动。left，right的外边距为负值，挤上去，占据middle两端，content设置左右padding，左右两栏配合相对定位微调到content左右padding中，content的width显示middle内容。这样middle，left，right互不覆盖。

图解

1.基础样式

设置一下宽高和颜色，方便理解

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
        }

image.png

2.给左中右添加左浮动

css代码：

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;

            float: left;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;

            float: left;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;

            float: left;
        }

image.png

3. 给content添加左右的padding，宽度为left和right宽度，防止遮挡middle的内容显示。

css代码：

        #content{
            height: 100px;
            background: rgb(239, 243, 4);

            padding: 0 100px;
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
            float: left;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
            float: left;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
            float: left;
        }

image.png

4.left和right添加margin-left，并设为负值，挤到上面

css代码：

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
            padding: 0 100px;
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
            float: left;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
            float: left;

            margin-left: -100%;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
            float: left;

            margin-left: -100px;
        }

image.png

5.left和right通过绝对定位微调位置，防止覆盖middle，圣杯布局大成。

css代码：

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
            padding: 0 100px;
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
            float: left;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
            float: left;
            margin-left: -100%;

            position: relative;
            right: 100px;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
            float: left;
            margin-left: -100px;

            position: relative;
            left: 100px;
        }

image.png

双飞翼布局

双飞翼布局是什么

双飞翼布局的效果和圣杯布局一样，就是实现方式不同。

双飞翼布局的实现方式

先看代码：

html代码：

    <div id="content">
        <div id="middle">
            <div id="middle-inner">
                middle-inner
            </div>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>

css代码：

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;

            float: left;
        }
        #middle-inner{
            background: rgb(5, 181, 250);

            margin: 0 100px;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;

            float: left;

            margin-left: -100%;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;

            float: left;

            margin-left: -100px;
        }

基本思路

双飞翼布局和圣杯布局很相似，只是在处理中间栏被遮挡的方式不一样。

middle，left，right都左浮动。left，right的左外边距为负值，挤上去，占据middle两端，middle-inner设置左右margin，这样middle-inner，left，right互不干扰。

图解

1.基本样式

css代码：

    #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
        }
        #middle-inner{
            background: rgb(5, 181, 250);
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
        }

image.png

2.给middle，left，right添加左浮动

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;

            float: left;
        }
        #middle-inner{
            background: rgb(5, 181, 250);
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;

            float: left;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;

            float: left;
        }

image.png

3.left，right左边距为负数，挤上去，占据middle两端

css代码：

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
            float: left;
        }
        #middle-inner{
            background: rgb(5, 181, 250);
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
            float: left;

            margin-left: -100%;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
            float: left;

            margin-left: -100px;
        }

image.png

4.middle-inner设置左右margin微调，双飞翼布局大成。

        #content{
            height: 100px;
            background: rgb(239, 243, 4);
        }
        #middle{
            width: 100%;
            height: 100%;
            background: #999;
            float: left;
        }
        #middle-inner{
            background: rgb(5, 181, 250);

            margin: 0 100px;
        }
        #left{
            width: 100px;
            height: 100%;
            background: red;
            float: left;
            margin-left: -100%;
        }
        #right{
            width: 100px;
            height: 100%;
            background: blue;
            float: left;
            margin-left: -100px;
        }

image.png

圣杯布局和双飞翼布局的不同

两个布局都是为了解决三栏布局，左右两栏固定宽，中间栏自适应。

圣杯布局是 把left和right挤上去之后，用content的padding配合左右两栏的绝对定位完成目的。 比双飞翼布局在css上多了position一个步骤。

双飞翼布局 是把left和right挤上去之后，用middle-inner的margin给左右两栏让出来位置。 比圣杯布局在html上多了个middle-inner盒子。

avatar
文章
阅读
粉丝