圣杯布局

最新推荐文章于 2024-07-17 16:42:38 发布
最新推荐文章于 2024-07-17 16:42:38 发布
阅读量67 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000007542377
版权
CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

  1. 三列布局，中间宽度自适应，两边定宽

  2. 中间栏要在浏览器中优先展示渲染

  3. 允许任意列的高度最高

  4. 要求只用一个额外的DIV标签

  5. 要求用最简单的CSS、最少的HACK语句

效果图：

CSS 和 DOM 代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>圣杯布局</title>
    <style type="text/css">
    body {background-color: #ffffff; font-size:14px;}
    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
    .main {background-color: #03a9f4; color:#ffffff;}
    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
    p {margin:0; padding:20px; text-align: center;}
    /* 左侧栏固定宽度，右侧自适应 */
    .bd-lft {
        zoom:1;
        overflow:hidden;
        padding-left:210px;
    }
    .bd-lft .aside {
        float:left;
        width:200px;
        margin-left:-100%; /*= -100%*/

        position:relative;
        left:-210px; /* = -parantNode.paddingLeft */
        _left: 0; /*IE6 hack*/
    }
    .bd-lft .main {
        float:left;
        width:100%;
    }
    /* 右侧栏固定宽度，左侧自适应 */
    .bd-rgt {
        zoom:1;
        overflow:hidden;
        padding-right:210px;
    }
    .bd-rgt .aside {
        float:left;
        width:200px;
        margin-left:-200px; /* = -this.width */

        position:relative;
        right:-210px; /* = -parantNode.paddingRight */
    }
    .bd-rgt .main {
        float:left;
        width:100%;
    }
    /* 左中右 三栏自适应 */
    .bd-3-lr {
        zoom:1;
        overflow:hidden;
        padding-left:210px;
        padding-right:210px;
    }
    .bd-3-lr .main {
        float:left;
        width:100%;
    }
    .bd-3-lr .aside-1 {
        float: left;
        width:200px;
        margin-left: -100%;
        position:relative;
        left: -210px;
        _left: 210px; /*IE6 hack*/
    }
    .bd-3-lr .aside-2 {
        float: left;
        width:200px;
        margin-left: -200px;

        position:relative;
        right: -210px;
    }
    /* 都在左边，右侧自适应 */
    .bd-3-ll {
        zoom:1;
        overflow:hidden;
        padding-left:420px;
    }
    .bd-3-ll .main {
        float:left;
        width:100%;
    }
    .bd-3-ll .aside-1 {
        float: left;
        width:200px;
        margin-left: -100%;
        position:relative;
        left: -420px;
        _left: 0px; /*IE6 hack*/
    }
    .bd-3-ll .aside-2 {
        float: left;
        width:200px;
        margin-left: -100%;
        position:relative;
        left: -210px;
        _left: 210px; /*IE6 hack*/
    }
    /* 都在右边，左侧自适应 */
    .bd-3-rr {
        zoom:1;
        overflow:hidden;
        padding-right:420px;
    }
    .bd-3-rr .main {
        float:left;
        width:100%;
    }
    .bd-3-rr .aside-1 {
        float: left;
        width:200px;
        margin-left: -200px;
        position:relative;
        right: -210px;
    }
    .bd-3-rr .aside-2 {
        float: left;
        width:200px;
        margin-left: -200px;
        position:relative;
        right: -420px;
    }
    </style>
</head>
<body>
    <div id="hd">头部</div>
    <div class="bd-lft">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>
        <div class="aside">
            <p>侧边栏固定宽度</p>
        </div>
    </div>
    <div class="bd-rgt">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>
        <div class="aside">
            <p>侧边栏固定宽度</p>
        </div>
    </div>
    <div class="bd-3-lr">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>
        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>
        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>
    <div class="bd-3-ll">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>
        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>
        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>
    <div class="bd-3-rr">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>
        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>
        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>
    <div id="ft">底部</div>
</body>
</html>
weixin_34032827
关注
html圣杯布局,三种实现圣杯布局方法
weixin_39827905的博客
06-10 578
本文介绍三种实现圣杯布局的方法,前两种可归为一类，与第三种方法差别在于加载顺序不同。圣杯布局实现1：步骤1：给出 HTML结构：圣杯布局1* {margin: 0;padding: 0;text-Align: center;}#top {background: #666;height: 60px;}#left {background: #E79F6D;}#content {background: ...
圣杯布局详解
dyb2440492276的博客
03-21 2939
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 圣杯布局为了让中间div内容不被遮挡，将中间div设置了padding-left和padding-right后，将左右两个div用margin和相对定位布局，position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。 css代码： .header,.footer{ height: 200px;
圣杯布局和双飞翼布局
qq_43539854的博客
04-06 2906
双飞翼布局与圣杯布局 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 特点： 两侧宽度固定，中间宽度自适应（三栏布局） 中间部分在DOM结构上有限，以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的div标签 圣杯布局： DOM结构： <div class="header"></div> <div class="container"> <div class=
圣杯布局的由来
weixin_68314577的博客
04-20 135
圣杯指多列等高的网页布局。因为目前的实现方法都存在局限，而又很难找到一个最优解，圣杯因此而得名。左边贴边，剩余部分平分。
HTML圣杯布局
m0_65696193的博客
07-17 220
右</div><div class="child left">左
圣杯布局——浮动
weixin_45662026的博客
08-20 200
在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局。圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是固比固布局。它们实现的效果是一样的，差别在于其实现的思想不太一样。接下来我们用两种方法实现圣杯布局：1.搭建html结构。
如何做出双飞翼布局与圣杯布局
01-08
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
圣杯布局的三种实现
qq_58511059的博客
12-30 531
【代码】圣杯布局的三种实现。
基于MATLAB的肤色的人数统计系统，以地铁车厢为实际背景，通过预测的方式，结合肤色统计人脸得到车厢人数，从而估计拥挤度
最新发布
10-04
【作品名称】：基于MATLAB的肤色的人数统计系统，以地铁车厢为实际背景，通过预测的方式，结合肤色统计人脸得到车厢人数，从而估计拥挤度 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：该课题为基于MATLAB的肤色的人数统计系统，以地铁车厢为实际背景，通过预测的方式，结合肤色统计人脸得到车厢人数，从而估计拥挤度，将结果反馈给车站里的视频，让乘客得知每节车厢的拥挤程度，从而合理分配车厢乘客，避免资源浪费和拥挤，本设计带有一个GUI交互界面。是一个人数统计类课题，该课题可以应用于教室人数统计，十字路口行人统计等等方面。 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
LabVIEW 入门教程：从零开始掌握图形化编程
10-04
亲爱的工程师和技术爱好者们， 您是否想学习一种强大的图形化编程语言，以便在自动化、数据采集、测试测量等领域大展身手？LabVIEW 是您的最佳选择！我们为您精心准备了一份全面的 LabVIEW 入门教程，帮助您从零开始，逐步掌握这门强大的工具。 为什么选择 LabVIEW？ 直观易学：图形化编程界面，无需编写复杂的代码。 广泛应用：适用于工业自动化、数据采集、仪器控制、图像处理等多个领域。 强大功能：内置丰富的函数库和工具包，满足各种复杂需求。 社区支持：庞大的用户社区和丰富的在线资源，助您解决各种问题。 本教程适合谁？ 初学者：从未接触过 LabVIEW 的新手。 工程师：希望提升技能，提高工作效率的专业人士。 学生：对自动化和测试测量感兴趣的在校学生。 研究人员：需要进行数据采集和分析的研究人员。 课程内容 LabVIEW 基础：安装与配置、界面介绍、基本概念。 图形化编程：创建 VI（虚拟仪器）、使用控件和指示器。 数据流编程：理解数据流的概念，编写简单的程序。 常用函数库：了解并使用常用
吉林农业科技学院在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-04
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
离网下三相不平衡负载，基于下垂控制的T型三电平逆变器，采用正负序分离四环控制，正序电压电流双闭环，负序电压电流双闭环，中点电位平
10-04
离网下三相不平衡负载，基于下垂控制的T型三电平逆变器，采用正负序分离四环控制，正序电压电流双闭环，负序电压电流双闭环，中点电位平衡控制，采用SPWM调制。 1.提供下垂控制原理,参数计算方法以及相关文献 2.电压电流双闭环控制 3.正负序分离控制以及相关资料 支持simulink2022以下版本（默认发2016b）。
微信小程序-新闻阅读器_ echatapp新闻阅读器.zip
10-04
微信小程序-新闻阅读器_ echatapp新闻阅读器
基于Python和HTML的TDXPystock股票交易自动化设计源码
10-04
该项目是一个基于Python和HTML的TDXPystock股票交易自动化设计源码，总共有72个文件组成，包括47个Python源文件、6个XML配置文件、6个文本文件、3个用户界面文件、1个Git忽略文件、1个IDE配置文件、1个Jupyter Notebook文件、1个Markdown文件、1个SQL文件和1个图片文件。该项目旨在通过编程手段实现股票交易自动化，适用于对股票市场感兴趣的开发者和投资者。
车牌定位实现过程方案.zip
10-04
c
微信OpenDevTool-微信小程序强制开发者工具打开-WiChatOpenDevTools Python.zip
10-04
微信OpenDevTool-微信小程序强制开发者工具打开-WiChatOpenDevTools Python
双飞翼布局与圣杯布局实现解析
"双飞翼布局”和“圣杯布局”是两种常见的前端网页三栏布局技术，它们主要用于解决页面在不同分辨率设备上保持良好显示效果的问题，同时实现内容区域的优先加载，提高用户体验。这两种布局方式都实现了两边固定宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值