css3布局-圣杯布局
圣杯布局he双飞翼布局都是解决两边固定款中间自适应的三栏布局
圣杯布局为了中间div内容不被别的内容覆盖，将中间div设置了左右的内边距后，将左右两个div用相对布局position: relative并给两侧的div添加right和left属性，以便左右两栏div移动后不内容不覆盖中间div。
圣杯布局的特点(两端固定中间自适应)，也就是说两端的内容不会因为浏览器宽度的改变使其内容改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
html,body{
min-width: 500px;
}
#container{
padding-left: 200px;
padding-right: 150px;
height: 200px;
}
#container .column{
float: left;
}
#center{
width: 100%;
background: red;
}
#left{
width: 200px;
margin-left: -100%;
position: relative;
background: blue;
left: -200px;
}
#right{
width: 150px;
margin-left: -150px;
position: relative;
right: -150px;
background: orange;
}
#footer{
clear: both;
}
</style>
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
<div id="left" class="column">左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div>
<div id="right" class="column">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</div>
</div>
<div id="footer"></div>
</body>
</html>
通过这段代码的实现，可以发现随着浏览器的缩小，只有中间的文字内容会随之改变，两端则不会，这就是三栏布局中常见的圣杯布局。
圣杯布局：我个人的理解的是，两端的div可是看成是限制了杯子的大小，而中间的div可以看成是一定容量的水，当杯子缩小后，里面的水的容量是固定的，所以水位会随之增高或降低
css3布局-圣杯布局的更多相关文章
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- CSS3之圣杯布局和双飞翼布局
圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS布局 — 圣杯布局与双飞翼布局
圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...
- css布局 -双飞翼布局&圣杯布局
一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- 固比固布局 圣杯布局 css实现传统手机app布局
手机app的布局大致上都是头部.内容.底部三部分: 我们需要实现的是头部.底部高度固定:中间内容区域自适应且可以滚动:直接贴代码: css: html,body { width: 100%; heig ...
随机推荐
- 一张图看懂Rxjava的原理
前言 Rxjava是NetFlix出品的Java框架, 官方描述为 a library for composing asynchronous and event-based programs usin ...
- halcon学习方法小结及以后的学习计划
学了这么久的halcon,感觉还是没有摸到门路. 记录一下这么久以来经历过的学习阶段: 看冈萨雷斯<数字图像处理>这本书,使用halcon做练习. 我实际上只比较完整地看了这本书的形态学处 ...
- Arduino学习笔记④ 经典按键实验
1.前言 我们讲了数字IO口介绍以及做了流水灯演示(主要用到IO口的输出功能),这节课我们讲解一下IO口的输入功能,说到输入功能,最经典的例子莫过于按键实验.废话少说,赶紧上车. 2.实验材料 ...
- “Triplet network”三元组网络阅读笔记
记录<DEEP METRIC LEARNING USING TRIPLET NETWORK>阅读笔记 文章总体内容: 作者在前人提出的多个特征提取方法的基础上提出Triplet netwo ...
- 星云测试插装编译流程与CI集成
星云测试Horn插装采用脚本配置方式自动对语法进行扫描和插装,在整个插装过程中需要用到星云提供的插件工具.通过与CI集成,在CI编译前通过jenkins调用星云插装插件模块进行必要的数据填充,生成对应 ...
- SpringBoot系列教程之Bean之指定初始化顺序的若干姿势
上一篇博文介绍了@Order注解的常见错误理解,它并不能指定 bean 的加载顺序,那么问题来了,如果我需要指定 bean 的加载顺序,那应该怎么办呢? 本文将介绍几种可行的方式来控制 bean 之间 ...
- Andriod Studio设置类默认签名模板
- 设计模式C++描述----13.代理(Proxy)模式
一. 举例说明 我们有时打开一个网站时会发现有这样的现象,网站上的文字都显示出来了,但是上面的图片还没显示,要等一会才能显示. 这些未打开的图片的位置上,还是会有图片框和一些等待的信息的,这就是代理模 ...
- (JavaScript) 时间转为几天前、几小时前、几分钟前
// 时间戳转多少分钟之前 getDateDiff(dateTimeStamp) { // 时间字符串转时间戳 var timestamp = new Date(dateTimeStamp).getT ...
- Python爬虫常用小技巧之设置代理IP
设置代理IP的原因 我们在使用Python爬虫爬取一个网站时,通常会频繁访问该网站.假如一个网站它会检测某一段时间某个IP的访问次数,如果访问次数过多,它会禁止你的访问.所以你可以设置一些代理服务器来 ...