圣杯布局和双飞翼布局的实现

发表于 2019-06-09  136 次阅读


文章目录

什么是圣杯布局,什么是双飞翼布局?

对于入行前端比较晚的同学,我想这两个布局应该听得比较少,因为我自己就是(捂脸)。一些技术上听起来很吓人的名词,其背后的实现和原理有时候是很简单的。所以不知道不要紧,学就是了。经过一番查证,圣杯布局和双飞翼布局其实是一种三栏布局,就是我们常说的中间自适应,两侧固定宽度的布局。圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED。我的理解是双飞翼布局是圣杯布局的一种优化实现。

一步一步实现圣杯布局和双飞翼布局

首先是DOM结构

<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>

这里需要注意的是三列的顺序是主列(main), 子列(sub), 附加列(extra)。这样主列内容是优先加载的。

下面我们编写css, 首先我们设置主列自适应宽度,子列和附加列固定宽度200px。并且三者左浮动

.main,
.sub,
.extra {
    float: left;
}
.main {
    width: 100%;
}
.sub,
.extra {
    width: 200px;
}

此时的效果是主列占满了整行,子列和附加列被挤到下一行

然后,为了把子列和附加列摆放到正确的位置,需要使用margin的负值定位。把挤到下一行的这两栏往前拉。

.sub {
    margin-left: -100%;
}
.extra {
    margin-left: -200px;
}

这样,一个基本的三栏布局呼之欲出啦,但是你会发现主列并没有在正确的位置。它是占满一行的。(由它的内容被子列遮挡可以看出)

所以我们设置父容器container的左右padding,把主列挤出来

.container {
    padding: 0 200px 0 200px;
}


主列是挤出来,但是子列和附加列的位置又不对,摔!它们跟着也被挤了出来,怎么办?这时就要发挥我们的想像啦。既然子列和附加列的位置不对,我们重新定位就好了,使用相对定位,根据自身定位

.sub,
.extra {
    position: relative;
}
.sub {
    right: 200px;
}
.extra {
    left: 200px;
}


恭喜你,你完成了一个圣杯布局了!ok,那双飞翼布局又是什么呢?其实双飞翼布局是在圣杯布局上的改造。它比圣杯布局多了一层标签来包裹主列。然后不再虽然设置父容器的padding的重新定位子列和附加列,而是设置主列内容的margin即可。

// html
<div class="container">
    <div class="main">
        <div class="main-content"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
// css
.main-content {
    margin: 0 200px 0 200px;
}

我认为双飞翼布局比圣杯布局有以下优点:
1.代码更易于理解,少了一层定位
2.更灵活,可以实现三栏的自由组合(css改变顺序,不用改html结构)

这就是圣杯布局和双飞翼布局的实现,完整代码可以看这里:
圣杯布局
双飞翼布局

本站文章基于国际协议BY-NA-SA 4.0协议共享;
如未特殊说明,本站文章皆为原创文章,请规范转载。

0

眼前解决不了的问题, 都可交付未来, 时间是一个伟大的作者, 他必将写出, 最完美的答案。