圣杯布局和双飞翼布局都是三列布局，两边定宽，中间自适应布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局如下

<!-- 圣杯布局 -->

<!DOCTYPE html>

<html>

<head>

<style>

        .con {

            padding-left: 150px;

	    padding-right: 190px;

        }

        .left{

            background: #E79F6D;

            width:150px;

            float:left;

            margin-left: -100%;

            position: relative;

            left:-150px;

        }

        .main{

            background: #D6D6D6;

            width:100%;

            float:left;

        }

        .right{

            background: #77BBDD;

            width:190px;

            float:left;

            margin-right: -190px;

            position: relative;

            right: -190px;

        }

</style>

</head>

    <body>

	<div class="con">

    		<div class="main">Main</div>

   	 	 <div class="left">Left</div>

    		<div class="right">Right</div>

	</div>

    </body>

</html>

圣杯布局和双飞翼布局的区别： 解决”中间栏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属性（圣杯布局中间div的padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）.

参考：https://blog.csdn.net/ivana_zyf/article/details/79149455

https://blog.csdn.net/Night_Nine_Leaves/article/details/79660762

css布局笔记（三）圣杯布局，双飞翼布局的更多相关文章

  1. CSS（五）圣杯，双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

  2. 三栏布局只知道圣杯、双飞翼，最终评级是……F

    三栏布局,面试与工作中的常见布局.分左中右三部分,其中左右宽度已知,中间宽度自适应.根据不同的DOM顺序与CSS处理,这里写下了五类布局方式. 一.浮动布局 1 圣杯布局 L:"我问你,你就 ...

  3. 你不知道的css各类布局（三）之自适应布局

    自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...

  4. CSS学习笔记（12）--Flex 布局教程：实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  5. CSS学习笔记（11）--Flex 布局教程：语法篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...

  6. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  7. CSS学习笔记三：自定义单选框，复选框，开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  8. css学习笔记三

    总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步! 1.水平居中 1.1):行内元素水平居中,在其父类设置text-align:center; 1.2): 块级元素水平居中有三种 第一种:定宽 ...

  9. 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  10. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

随机推荐

  1. 多路I/O复用（select、poll、epoll）的比较学习：

    elect.poll.epoll之间的区别总结[整理]  转自:http://www.cnblogs.com/Anker/p/3265058.html   select,poll,epoll都是IO多 ...

  2. 关于第三次寒假作业之C++Calculator项目的情况：

    一.仓库地址: object-oriented: 二.作业要求: Calculator: 三.完成本次作业的情况及感受: 刚接触到这个题目的时候,自己就是那丈二的和尚,摸不着头脑,由于自己视频找得比较 ...

  3. centos 增加网卡

    CentOS 6添加网卡的方法 (2013-11-26 17:19:44) 转载▼ 标签: it 分类: Linux 前段时间安装了1台XEN server虚拟机,之前只用了1个网卡,ip是10.11 ...

  4. SQLServer创建链接服务器

    --SQLServer创建链接服务器----1.访问接口中Oracle接口 属性 选择 允许进程内-- --删除链接服务器EXEC master.dbo.sp_dropserver @server=N ...

  5. iOS AOP框架Aspects实现原理

    总结: Aspects 是对 类的继承结构isa.mataclass结构的调整和维护:相当于链表的节点插入和删除: 同时使用method Swizzling 对方法统一重定向: 同时使用类似代理的机制 ...

  6. sqooq同步mysql tinyint类型到hive的一个诡异问题

    sqoop job运行完成之后,发现为tinyint类型的一类始终没有值,经检查发现上游mysql有值,再查看hdfs文件,发现这列被抓换为了boolean类型 搜索一下发现有人碰到过了,以下原文来自 ...

  7. 【洛谷】【扩欧】P1516 青蛙的约会

    [题目描述] 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有 ...

  8. 3、JVM--垃圾回收期和内存分配策略（2）

    3.5.垃圾收集器 如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体实现.Java虚拟机规范中对垃圾收集器应该如何实现并没有任何规定,因此不同的厂商.不同版本的虚拟机所提供的垃圾收集 ...

  9. 打包dll发布到nuget服务器

    几个月前上传过一次nuget包,结果好久不用,今天想更新下,完全忘记了怎么用了,又是一顿查,所以决定记录下来,当然这可能不是一个傻瓜式的教程,但聪明的你们应该能够看明白的,因为整体操作还是很简单的 好 ...

  10. mysql root密码忘记重置及相关注意事项

    1.使用mysqld_safe --skip-grant-tables跳过授权,进入mysql操作界面或者在配置文件mysqld 添加skip-grant-tables也行,找回后需要删除..恢复原样 ...