双飞翼布局

  <style>
*{
margin:;
padding:;
}
.main{
width: 100%;
height: 200px;
background: pink;
float: left;
}
.content{
padding: 0 200px;
}
.left{
height: 200px;
width: 200px;
background: blue;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
height: 200px;
background: yellow;
float: left;
margin-left: -200px;
}
</style>
  <div class="main">
<div class="content">
...
</div>
</div>
<div class="left"></div>
<div class="right"></div>

这里用到了  负边距    先写中间的部分  有一部分原因 也是因为  中间部分要优先显示

圣杯布局

    *{
margin:;
padding:;
}
.content{
width: 100%;
padding: 0 200px;
}
.main{
width: 100%;
height: 200px;
background: red;
float: left;
}
.left{
width: 200px;
height: 200px;
background: pink;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
height: 200px;
background: blue;
float: left;
margin-left: -200px;
position: relative;
right: 200px;
}
  <div class="content">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>

圣杯 与 双飞翼布局的  区别是  content 标签 在哪里     双飞翼在 main 里面     这样 content  需要  有 padding  如果 中间这部分  不止一个 content  就要写 多个  padding  这样   不划算   也很不方便

所以圣杯   是 双飞翼 的升级版      其实也差不多    就是  content 在最外层   原理和 双飞翼一样  都是  负边距       他是 给最外层的  content 设置  了  padding   里面 仍然是  双飞翼  不过  就是  让 ‘’翅膀‘’  通过 reletave 定位 来  补上  content padding 空出来的部分

CSS(五)圣杯,双飞翼布局的更多相关文章

  1. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  2. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  3. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  4. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  5. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  6. css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...

  7. css布局笔记(三)圣杯布局,双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  8. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  9. CSS布局 — 圣杯布局与双飞翼布局

    圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...

随机推荐

  1. &quot;Insufficient RAM for Flash Algorithms&quot;出错原因及解决方式

    "Insufficient RAM for Flash Algorithms"错误通常会有一个"cannot load flash programming algorit ...

  2. iOS 获取导航栏和状态栏的高度

    CGRect rect = [[UIApplication sharedApplication] statusBarFrame]; 状态栏的高度: float status height =  rec ...

  3. ado 字符串变量

    这次变量主要针对 Mfc 的 Cstring 类型的变量(前面VC 链接Access 数据库 插入变量到表) 思路; 1 把cstring 类型 转为 string 2 string 转 char 数 ...

  4. thymeleaf模板的使用(转)

    作者:纯洁的微笑 出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...

  5. ligerUI---下拉框(Combobox)

    写在前面: 突然发现,从刚开始对ligerUI的抵触,觉得都没有接触过,也不会,到现在,感觉ligerUI的一些组件还是挺好用的,大概日久生情吧.嘻嘻~~~,下拉框是常用的一个组件,在之前的博客中也写 ...

  6. animate.css+wow.js页面滚动即时显示动画

    1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...

  7. ios单独的页面支持横竖屏的状态调整,HTML5加载下(更新2)

    单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...

  8. bzoj 3571: [Hnoi2014]画框

    Description 小T准备在家里摆放几幅画,为此他买来了N幅画和N个画框.为了体现他的品味,小T希望能合理地搭配画与画框,使得其显得既不过于平庸也不太违和.对于第 幅画与第 个画框的配对,小T都 ...

  9. bzoj 3670: [Noi2014]动物园

    Description 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学习 ...

  10. Clonezilla SE---克隆linux------转载

    引入: 本博文将会是<学生机房中的虚拟化>专题中的核心内容.因为,通过本篇博文的讲述,大家可以看到用于网络化批量部署Linux系统的Clonezilla SE搭建的全过程.注意,几乎所有命 ...