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

圣杯布局如下

  1. <!-- 圣杯布局 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style>
  6. .con {
  7. padding-left: 150px;
  8. padding-right: 190px;
  9. }
  10. .left{
  11. background: #E79F6D;
  12. width:150px;
  13. float:left;
  14. margin-left: -100%;
  15. position: relative;
  16. left:-150px;
  17. }
  18. .main{
  19. background: #D6D6D6;
  20. width:100%;
  21. float:left;
  22. }
  23. .right{
  24. background: #77BBDD;
  25. width:190px;
  26. float:left;
  27. margin-right: -190px;
  28. position: relative;
  29. right: -190px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="con">
  35. <div class="main">Main</div>
  36. <div class="left">Left</div>
  37. <div class="right">Right</div>
  38. </div>
  39. </body>
  40. </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. 16:42 python历史

    python的作者是Guido van Rossum,大牛,2.7版本好像到2020年就不能用了,估计很多公司对此有很多的需求吧.

  2. Perl之my与local

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sunshoupo211/article/details/31745909    在函数定义中,使用m ...

  3. 1503. [NOI2004]郁闷的出纳员【平衡树-splay】

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...

  4. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

  5. Python之Flask框架使用

    Flask和Django.Bottle号称Python中的强大又简单的Web框架. Flask是一个使用Python编写的轻量级Web应用框架.基于Werkzeug WSGI工具箱和Jinja2 模板 ...

  6. Kafka设计解析(十七)Kafka 0.11客户端集群管理工具AdminClient

    转载自 huxihx,原文链接 Kafka 0.11客户端集群管理工具AdminClient 很多用户都有直接使用程序API操作Kafka集群的需求.在0.11版本之前,kafka的服务器端代码(即添 ...

  7. <摘录>字节对齐与结构体大小

    说明: 结 构体的sizeof值,并不是简单的将其中各元素所占字节相加,而是要考虑到存储空间的字节对齐问题.这些问题在平时编程的时候也确实不怎么用到,但在一 些笔试面试题目中出是常常出现,对sizeo ...

  8. 测试oracle表空间自动扩展

    2019-04-1116:01:25 表空间分配10m自动扩展,向表中插入数据,看表空间达到10m以后是否会报错. 测试过程如下: 1.创建表空间 CREATE TABLESPACE TEST DAT ...

  9. The Gene of Bitizens

    1.          Summary The document is about the general idea of the architecture design of the Bitizen ...

  10. C 修真之旅

    前言 - 那久远的故事 工作好多年, 有时脑海里总回想儿时看的梦. 那时还刚上初中, 班上个子小的同学, 闲暇娱乐可能就是看 <飘渺之旅> 之类的小说. 前几年尝试满足自己少年时的记忆. ...