圣杯双飞翼布局练习学习

最新推荐文章于 2022-02-08 18:03:25 发布

我要当极客

最新推荐文章于 2022-02-08 18:03:25 发布

阅读量103

点赞数

分类专栏：学习小记录

本文链接：https://blog.csdn.net/weixin_44089544/article/details/89008303

版权

学习小记录专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这两个方法小弟也是早有耳闻…今天我就搞起来了！

圣杯、双飞翼：

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED

遵循特点:

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的
标签(练习中双飞翼貌似要添加两个div）

首先是圣杯布局：

使三个区域都处于左浮动状态，并使main的宽度成父容器的100%；
为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%，而右边right的margin-left则为负的其自身的宽度。（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）
为class="center"的主容器设置左右padding值，使其为以后的侧边栏定位空出位置，padding的值为侧边栏的宽。
为content添加box-sizing: border-box;撑出左右两侧空隙
对left和right添加position:relative，然后对它们进行定位，移动到两侧，圣杯布局就初步做完了

中间center部分可能需要设置最小宽度，以防宽度过小造成错乱（双飞翼布局中不会出现此问题，所以推荐双飞翼布局）。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 100%;
            height: 100px;
            position: relative;

        }
        .center{
            width: 100%;
            height: 100px;
            float: left;
            box-sizing: border-box;
            padding: 0 100px;
            background: red;
        }
        .left{
            width: 100px;
            height: 100px;
            float: left;
            background: bisque;
            margin-left: -100%;
            position: relative;

        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
            background: gold;
            margin-left: -100px;
            position: relative;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="center">start内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容end</div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

双飞翼布局

双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。

步骤：

给main里面添加一个内容标签content，并且设置它的左右margin值为左右侧边栏的宽度
去掉main的背景色和高度，去掉position，去掉padding

总体来说双飞翼布局的优点还是更明显一点1是解决了布局错乱的问题，2是代码逻辑更加简单，省去了position和box-sizing，代价就是需要多添加一个div标签，个人还是比较偏向于双飞翼布局一点~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 100%;
            height: 100px;
        }
        .main{
            width: 100%;
            float: left;
        }
        .center {
            height: 100px;
            margin: 0 100px;
            background: red;
        }
        .left{
            width: 100px;
            height: 100px;
            float: left;
            background: #71dd8a;
            margin-left: -100%;

        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
            background: darkgoldenrod;
            margin-left: -100px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="main">
        <div class="center">start内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容end</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

我要当极客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯双飞翼布局练习学习

这两个方法小弟也是早有耳闻…今天我就搞起来了！圣杯、双飞翼：两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED遵循特点:两侧宽度固定，中间宽度自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的标签(练习中双飞翼貌...
复制链接

扫一扫

专栏目录