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 ...
随机推荐
- SpringBoot2.x--入门篇--01--HelloWorld
很多人说,学习springboot至少需要spring基础,servlet基础等等,笔者不敢苟同.凡是有一定java基础的人,都可以直接学习springboot,当学到原理和源码时,通过查缺补漏的方式 ...
- oracle中创建用户、角色、权限简单使用
Oracle关于用户.权限.角色简单使用 创建数据库用户(在system用户下)create user 用户名 identified by 密码; 授权grant 权限名 to 用户名; 查看当前用户 ...
- 数据结构c语言
这篇博客是为了对数据结构进行一系列的学习整理,包括线性表,栈和队列,串,数组和广义表,树和二叉树,图,动态储存管理,查找,内部排序,外部排序文件进行部分笔记的记录. 基本概念和术语 数据:是对客观事物 ...
- CodeForces - 1214D D. Treasure Island
题目链接:https://vjudge.net/problem/2728294/origin 思路:可以抽象成管道,先试试能不能找到一个通道能通到终点, 如果可以则封锁这个通道,一个石头即可, 再试试 ...
- win32API多线程编程
win32线程API 在Windows平台下可以通过Windows的线程库来实现多线程编程. 对于多线程程序可以使用Visual Studio调试工具进行调试,也可以使用多核芯片厂家的线程分析调试工具 ...
- Dubbo配置完全外部化实践，使用动态配置中心的注意事项
问题描述 近期开发项目,将Dubbo的配置全部外部化到动态配置中心.这里配置中心我使用的是Apollo. @Configuration public class DubboConfig { @Bean ...
- 总结Java equals()和hashCode()的联系
Java equals()和hashCode()的联系 如果两个对象是相等的,那么它们必须有相同的哈希码. 如果两个对象具有相同的哈希码,他们可能相等,可能不相等. 如果两个对象是不同的类的实例 他们 ...
- Tkinter 之Entry输入框标签
一.参数说明 语法 作用 Entry(root,width=20) 组件的宽度(所占字符个数) Entry(root,fg='blue') 前景字体颜色 Entry(root,bg='blue') 背 ...
- jquery链式原理.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 设计模式C++描述----01.单例(Singleton)模式
一.概念 单例模式:其意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享. class CSingleton { //公有的静态方法,来获取该实例 public: s ...