一种兼容性强的双飞翼布局写法

二者的来历#

圣杯布局的来历是2006年发在a list part上的这篇文章：In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物"的意思，不是一种对页面的形象表达。双飞翼据考源自淘宝UED，应该是一种页面的形象的表达。

二者的功能和区别#

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

双飞翼布局的实现#

DOM文档结构如下：

    <div class="bd-3-lr">
        <div class="main col">
            <div class="main-wrap">
                <p>主内容栏自适应宽度并优先加载</p>
            </div>
        </div>
        <div class="aside-1 col">
            <p>侧边栏1固定宽度</p>
        </div>
        <div class="aside-2 col">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>

CSS code如下:

.bd-3-lr {
            zoom: 1;
            overflow: hidden;
            margin: 10px 0;

        }
.main {
            width: 100%;
            background-color: linen;
        }

.main .main-wrap {
            background-color: #ff80ff;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;           
        }
.aside1,
.aside2 {
            width: 200px;
            background-color: #ff00ff;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
.col {
            float: left;
        }
.bd-3-lr .main-wrap {
            margin: 0 210px;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

.bd-3-lr .aside1 {
            margin-left: -100%;
        }

.bd-3-lr .aside2 {
            margin-left: -200px;
        }

了解这种布局原理后，可以自行制作三栏的不同分布情况，示例。

示例的全部源码如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        body {
            font-size: 18px;
            color: linen;
            background-color: #fff;
            padding: 0;
            margin: 0;
        }

        p {
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        .hd,
        .ft {
            width: 100%;
            background-color: #c0c0c0;
        }

        .bd-lft,
        .bd-rgt,
        .bd-3-lr,
        .bd-3-ll,
        .bd-3-rr {
            zoom: 1;
            overflow: hidden;
            margin: 10px 0;

        }

        .main {
            width: 100%;
            background-color: linen;
            /* 使左右等高 */
            /* padding-bottom: 10000px;
            margin-bottom: -10000px; */

        }

        .main .main-wrap {
            background-color: #ff80ff;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
           
        }
        .aside,
        .aside1,
        .aside2 {
            width: 200px;
            background-color: #ff00ff;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .col {
            float: left;
            /* 使左右等高 */
            /* padding-bottom: 20000px;
            margin-bottom: -20000px; */
        }

        .bd-lft .main-wrap {
            margin-left: 210px;
        }

        .bd-lft .aside {
            margin-left: -100%;
        }

        .bd-rgt .main-wrap {
            margin-right: 210px;
        }

        .bd-rgt .aside {
            margin-left: -200px;
        }

        .bd-3-lr .main-wrap {
            margin: 0 210px;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .bd-3-lr .aside1 {
            margin-left: -100%;
        }

        .bd-3-lr .aside2 {
            margin-left: -200px;
        }

        .bd-3-ll .main-wrap {
            margin-left: 420px;
        }

        .bd-3-ll .aside1 {
            margin-left: -100%;
        }

        .bd-3-ll .aside2 {
            margin-left: calc(-100% + 210px);
        }

        .bd-3-rr .main-wrap {
            margin-right: 420px;
        }

        .bd-3-rr .aside1 {
            margin-left: -410px;
        }

        .bd-3-rr .aside2 {
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div class="hd">
        <p>我是头部</p>
    </div>
    <div class="bd-lft">
        <div class="main col">
            <div class="main-wrap">
                <p>我是右侧自适应栏</p>
                <p>我是右侧自适应栏</p>
                <p>我是右侧自适应栏</p>
            </div>
        </div>
        <div class="aside col">
            <p>我是定宽左侧边栏</p>
        </div>
    </div>

    <div class="bd-rgt">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside col">
            <p>我是定宽右侧边栏</p>
            <p>我是定宽右侧边栏</p>
            <p>我是定宽右侧边栏</p>
        </div>
    </div>

    <div class="bd-3-lr">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside1 col">
            <p>我是定宽左侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
        <div class="aside2 col">
            <p>我是定宽右侧边栏</p>
            <p>我是左侧自适应栏</p>
            <p>我是左侧自适应栏</p>
        </div>
    </div>

    <div class="bd-3-ll">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside1 col">
            <p>我是定宽左侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
        <div class="aside2 col">
            <p>我是定宽右侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
    </div>

    <div class="bd-3-rr">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside1 col">
            <p>我是定宽左侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
        <div class="aside2 col">
            <p>我是定宽右侧边栏</p>
            <p>我是左侧自适应栏</p>
            <p>我是左侧自适应栏</p>
        </div>
    </div>
    <div class="ft">
        <p>我是尾部</p>
    </div>
</body>

</html>
posted @   飛華  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· 教学笔记：CSS学习笔记
· MD基本语法
· 圣杯布局和双飞翼布局的理解和区别，并用代码实现
· 圣杯布局和双飞翼布局的理解和区别，并用代码实现
· CSS三栏布局
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示
主题色彩