CSS：布局——圣杯布局和双飞翼布局

原创

KaiSarH 2021-09-01 10:18:30 ©著作权

文章标签 双飞翼布局 html 侧边栏自适应 css 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者KaiSarH的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、概念

圣杯布局和双飞翼布局是两种重要的布局方式.两者功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局.
圣杯布局来源于文章In Search of the Holy Grail
双飞翼布局来源于淘宝UED
遵循特点
① 两侧宽度固定,中间宽度自适应
② 中间部分在DOM结构上优先,以便先行渲染(也就是在写代码的时候中间层的div要放在最前面)
③ 允许三列中任意一列成为最高列
④ 双飞翼比圣杯多一个额外的<div>标签

二、圣杯布局

写下HTML代码
使三个区域都处于左浮动状态,并且使main的宽度成父容器的100%
为两侧侧边栏添加负margin,用以调整位置,其中摆在左边的left的margin-left为-100%,而右边right的margin-left则为负的其自身宽度.(利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理)
为class="container"的主容器设置左右padding值,使其为以后的侧边栏定位空出位置,padding的值为侧边栏的宽
对left和right添加position:relative,然后对它们进行定位,移动到两侧,圣杯布局初步完成.

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-圣杯布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            min-width: 400px;
            height: 200px;
            background-color: green;
            /*预留出位置*/
            padding: 0 200px;
        }

        .left, .right {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }

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

        .left {
            /*% 定义基于父对象总高度的百分比左外边距。*/
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
<!--容器-->
<div class="container">
    <div class="main">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>
</html>

运行效果:
CSS：布局——圣杯布局和双飞翼布局_css
CSS：布局——圣杯布局和双飞翼布局_css_02

三、双飞翼布局

双飞翼布局不仅能满足main处于优先加载的地位,而且更好的解决了圣杯布局的错乱问题,且CSS代码更简单,缺点是增加了一个标签
步骤 :
① 给main里面添加一个内容标签content,并且设置它的左右margin值为左右侧边栏的宽度
② 去掉main的背景色和高度,双飞翼布局

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }

        .container{
            min-width: 400px;
            height: 200px;
            background-color: green;
        }

        .left, .right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .main-content{
            margin: 0 200px;
        }

        .left{
            margin-left: -100%;
        }

        .right{
            margin-left: -200px;
        }
    </style>
</head>
<body>
<!--容器-->
<div class="container">
    <div class="main">
        <div class="main-content">中间栏</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>
</html>

运行效果: