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 ...
随机推荐
- Hello World ! 节日快乐！
节日快乐! 世界你好,Hello World Java public class HelloWorld{ public static void main(String[] args) { System ...
- Activity 学习（二） 搭建第一个Activity流程框架
本次示例使用的IDER测试完成 测试背景 : xx饿了去饭店吃饭 需要先和服务员点餐 点完餐后服务员将菜品传递给厨师制作 制作完成后吃饱 一 :创建流程图 创建上一篇测试成功出现的BpmnFil ...
- 计算机基础之编程 + 基本组成 + 组成补充 + 操作系统(day01整理)
目录 一 计算机基础之编程 (一) 什么是编程语言 (二) 什么是编程 (三) 为什么要编程 二 计算机的基本组成 (一) CPU(大脑) (1) 控制器 (2) 运算器 (二) 存储器(记忆) (1 ...
- 使用haproxy实现负载均衡集群
一.HAProxy概述: HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.根据官方数据,其最高极限支持10G的并发. HAP ...
- unityweb Request请求
UnityWebRequest是新的网络请求Api,分为LLApi和HLApi,其中LLApi为低级api,所谓低级api是指只是提供最基本的api接口,然后需要通过不同的参数来确定请求方式.为此un ...
- NetworkManager网络通讯_问题汇总（四）
此篇来填坑,有些坑是unet自身问题,而大部分则是理解不准确造成的(或者unity定义太复杂) 问题一: isLocalPlayer 值一直是false 出现场景:NetworkLobbyPlayer ...
- 使用VS2013操作MYSQL8 (ADO.NET方式 & EF6)
今天有时间测试了一下通过.net环境操作MYSQL数据库,测试过程及结果记录如下: 1.MYSQL安装 (1)我是从MYSQL官网下载的最新版,即MYSQL8.0,在MySql官网的下载页面,找到“M ...
- QTCreator增加帮助文档
1.下载QT库的帮助文档,是qch格式的. 2.在QTCreator的->Tools->Options->Help->Add增加下载的qch文件即可.
- 2018.8.8 python 初识函数
主要内容: 1.函数定义 2.函数名,函数体以及函数的调用 3.函数的返回值 4.函数的参数 一.函数的定义 函数:对代码块和功能的封装和定义. 二.函数名.函数体及函数的调用 我们使用def关键字来 ...
- pymysql 防止sql注入案例
from pymysql import connect def main(): """sql演示""" # 1.输入一个语句,根据id展示相 ...