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 ...
随机推荐
- composer依赖管理与laravel框架安装
步骤有点多,生怕哪一天忘记,记录下来会好点 laravel安装有两种途径:1.直接在一些国内第三方网站,如:https://www.golaravel.com/download/ 下载压缩包来解压即可 ...
- 你不知道的Canvas（一）
Canvas基础 一.Canvas是什么 Canvas是一个可以使用脚本(通常为JavaScript来绘制图形的HTML) 元素.例如,它可以用于绘制图表.制作图片构图或者制作简单的动画,主要用来绘制 ...
- 图像处理笔记（二十）：LAWS纹理滤波应用于缺陷检测
LAWS纹理滤波 texture_laws(Image, 原图像 ImageTexture, 输出值,滤波后图像 FilterType, 过滤器类型 Shift, 灰度值转换,滤波后的灰度值可能会比较 ...
- CMMS系统中工单派案&调度
系统为客户经理提供一个有效的调度控制台,由客户经理负责将需要外派现场处理的工单进行统一的分配调度,系统显示每个技术人员的时间表,根据专业技能.可用性.距离或其他资格标准筛选技术服务人员,并向调度人员提 ...
- JVM - 复习
内存模型图 程序计数器(PC) 程序计数器的特点 PC是一小块内存空间,用于记录当前线程执行的字节码指令的地址.如果执行的是本地方法(native),PC里此时显示Undefined 优点: 控制程序 ...
- Linux常用命令（1）
常用命令(1) 1.系统相关命令 su 切换用户 hostname 查看主机名 who 查看登录到系统的用户 whoami 确认自己身份 history 查看运行命令的历史 ifconfig ...
- zepto源码分析·ajax模块
准备知识 在看ajax实现的时候,如果对ajax技术知识不是很懂的话,可以参看下ajax基础,以便读分析时不会那么迷糊 全局ajax事件 默认$.ajaxSettings设置中的global为true ...
- jQuery选择器 大于 空格 波浪线 加号
JQuery选择器 大于 空格 波浪线 加号的区别 元素遍历 符号 说明 空格 $(‘parent child’)表示获取parent下的所有的child节点(所有的子孙). 大于号 $(‘paren ...
- codeforce -14A A. Letter
A. Letter time limit per test 1 second memory limit per test 64 megabytes input standard input outpu ...
- SpringBoot与MybatisPlus整合之活动记录(十五)
活动记录和正常的CRUD效果是一样的,此处只当一个拓展,了解即可 pom.xml <dependencies> <dependency> <groupId>org. ...