CSS(五)圣杯,双飞翼布局
双飞翼布局
<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(五)圣杯,双飞翼布局的更多相关文章
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- css布局记录之双飞翼布局、圣杯布局
双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...
- css布局笔记(三)圣杯布局,双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- css中的圣杯布局和双飞翼布局
圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...
- CSS布局 — 圣杯布局与双飞翼布局
圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...
随机推荐
- "Insufficient RAM for Flash Algorithms"出错原因及解决方式
"Insufficient RAM for Flash Algorithms"错误通常会有一个"cannot load flash programming algorit ...
- iOS 获取导航栏和状态栏的高度
CGRect rect = [[UIApplication sharedApplication] statusBarFrame]; 状态栏的高度: float status height = rec ...
- ado 字符串变量
这次变量主要针对 Mfc 的 Cstring 类型的变量(前面VC 链接Access 数据库 插入变量到表) 思路; 1 把cstring 类型 转为 string 2 string 转 char 数 ...
- thymeleaf模板的使用(转)
作者:纯洁的微笑 出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...
- ligerUI---下拉框(Combobox)
写在前面: 突然发现,从刚开始对ligerUI的抵触,觉得都没有接触过,也不会,到现在,感觉ligerUI的一些组件还是挺好用的,大概日久生情吧.嘻嘻~~~,下拉框是常用的一个组件,在之前的博客中也写 ...
- animate.css+wow.js页面滚动即时显示动画
1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...
- ios单独的页面支持横竖屏的状态调整,HTML5加载下(更新2)
单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...
- bzoj 3571: [Hnoi2014]画框
Description 小T准备在家里摆放几幅画,为此他买来了N幅画和N个画框.为了体现他的品味,小T希望能合理地搭配画与画框,使得其显得既不过于平庸也不太违和.对于第 幅画与第 个画框的配对,小T都 ...
- bzoj 3670: [Noi2014]动物园
Description 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学习 ...
- Clonezilla SE---克隆linux------转载
引入: 本博文将会是<学生机房中的虚拟化>专题中的核心内容.因为,通过本篇博文的讲述,大家可以看到用于网络化批量部署Linux系统的Clonezilla SE搭建的全过程.注意,几乎所有命 ...