面试问你”圣杯布局“和“双飞翼”，你会吗？

翰玥
105 阅读3分钟

你有没有被问过这样一道布局的题目："实现一个左右两栏宽度固定，中间自适应的布局"。其实碰到这种题目一般面试官会对我们灵魂拷问，因为这种实现方式一般都会有多种，如果仅仅答出一种方式肯定不会令面试官满意的。比较简单的两种当时有绝对定位布局和flex大法。今天我们介绍两种稍微复杂一点的布局——圣杯布局和双飞翼。千万不要被这两个名字吓到哦，其实原理很简单。

圣杯布局

我们首先来介绍一下圣杯布局的实现原理。

需要左中右三个盒子，我们暂且叫他们left,right,center。这三个盒子需要有一个父盒子container,三个子盒子的布局顺序为center, left,right。需要给container设置padding-left和padding-right。然后给center设置宽度100%。此时你会发现center已经是我们希望看到的效果了。

image.png 那接下来我们就需要调整left和right就好了。接着我们需要给这三个盒子设置浮动float:left,让他们脱离原本的文档流，由于center的宽度为100%，所以left，right会被挤到下面一行显示。

image.png 这是我们需要用到一个技巧——margin负值。

由于center的宽度为100%，所以left，right会被挤到下面一行显示。如果宽度够显示下left和right的情况是不是就是下面的结果了呢？ image.png 那此时我们给left设置margin-left: -100%不就是让left往左移动它父级的100%的距离吗？

image.png 然后再使用绝对定位，让left往左移动它自身的宽度即可。

image.png 我们再看下right应该怎么实现。当left实现完了之后，如果宽度够长的情况下，那么right应该在什么位置呢？

image.png 然后给right设置margin-left:-200px让它往左移动它自身的宽度。

image.png 最后再使用绝对定位，让right往右移动它自身的宽度即可。

image.png

下面看下完整代码：

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
.container {
    padding-left: 100px;
    padding-right: 200px;
}

.center {
    float: left;
    width: 100%;
    height: 200px;
    background-color: blue;
}

.left {
    float: left;
    width: 100px;
    height: 100px;
    margin-left: -100%;
    position: relative;
    left: -100px;
    background-color: red;
}


.right {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
    position: relative;
    right: -200px;
    background-color: aqua;
}
</style>

双飞翼

双飞翼的布局方式和圣杯布局的差不多，只不过圣杯布局使用的是padding,而双飞翼使用的是margin。但是此时我们要改变下布局结构了，需要在center中加一个标签，并且center的宽度还是100%。我们首先看下结构

<div class="container">
    <div class="center">
            <div class="wrap"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

此时展示出来的效果是这样的

image.png 当我们给center，left，right设置浮动float:left,发现由于宽度不够，left和right会被挤到下面一行显示，如果宽度够长的话，left和right会在后面显示。

image.png 我们同样按照上面的方式给left设置margin:-100%,right设置margin:-200px。

image.png 但是此时center的长度是100%只不过被left和right盖住了。所以需要在center里面加一个标签，然后给这个标签设置margin-left:100px,margin-right:200px即可。

image.png

image.png 下面看下完整代码

.center {
    float: left;
    width: 100%;
    height: 200px;
    background-color: aqua;
}

.left {
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 200px;
    background-color: bisque;
}

.right {
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 200px;
    background-color: blue;
}

.wrap {
    margin-left: 100px;
    margin-right: 200px;
    height: 100%;

}

以上就是这两种布局方式，相信大家理解了之后就不会觉得困难了。

如果有疑问把你的问题放在留言区，大家一起学习一起进步！

avatar
文章
阅读
粉丝