css的圣杯布局
圣杯布局和双飞翼布局实现的效果是一样的。
代码解析：
1.四个section，container，main,left,right。其中那个container为父容器。
2.main,left,right均左浮动。
3.main的宽度为100%。
4.设置left的margin:-100%。
5.设置rightd margin:-200px;
6.设置父容器的内边距padding:0px 200px 0px 200px。
7.设置left的positon:relative;left:-200px.
8.设置right的position:relative:right;right:-200px;
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
min-width: 700px;
} #container {
padding: 0px 200px 0px 200px;
} #main {
height: 200px;
width: 100%;
float: left;
background-color: rebeccapurple;
word-break: break-all;
} #left {
height: 200px;
width: 200px;
float: left;
background-color: gold;
margin-left: -100%;
position: relative;
left: -200px;
} #right {
height: 200px;
width: 200px;
float: left;
background-color: firebrick;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head> <body>
<section id="container">
<section id="main">
gfdgdfg gdfgfdg gfdgdfg gdfgfdggfdgdfg gdfgfdggfdgdfg gdfgfdg
</section>
<section id="left"></section>
<section id="right"></section>
</section>
</body> </html>
css的圣杯布局的更多相关文章
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- 前端css：“圣杯布局”
昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- CSS布局方案之圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
随机推荐
- Erlang中日志管理
http://blog.sina.com.cn/s/blog_96b8a1540101317g.html 一.基本概念 在Erlang中,通过两个概念管理错误事情:事件管理器(event manage ...
- Javascript中eval解析的json的几种用法
eval解析json字符串可用的三种方式都可以实现... <!DOCTYPE html> <html> <head> <meta charset=" ...
- Babel与Polyfill的关系和区别
很多同学搞不清楚babel与polyfill的关系以及区别,这儿给大家细致解惑. Babel:Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码.注意:Babel 默 ...
- 获取全局上下文(getApplicationContext)_创建Shared Preference工具类_实现自动登录
获取全局上下文(getApplicationContext)_创建Shared Preference工具类_实现自动登录 ===========================获取全局上下文(getA ...
- GridLayout网格布局
网格布局特点: l 使容器中的各组件呈M行×N列的网格状分布. l 网格每列宽度相同,等于容器的宽度除以网格的列数. l 网格每行高度相同,等于容器的高度除以网格的行数. l 各组件的排列方式 ...
- 使用elasticsearch遇到的一些问题以及解决方法（不断更新）
7.org.elasticsearch.transport.RemoteTransportException: Failed to deserialize exception response fro ...
- TextView和EditText中添加图片（ImageSpan）
编辑框中加图片,以前一直以为很复杂,后来发现android有些类已经很好的实现了这些功能. 代码如下: [java] view plaincopy mSubjectDetailView = (Text ...
- Linux运维完全小白入门指南
前几天整理了一下自己入门时候搜集的资料,一边整理一边回忆. 那时候我还是个小白,用虚拟机装了个CentOS系统来玩,但是总也装不上,在论坛上求助也没人理.半天终于有个人说在某网站看过这个问题,我又找了 ...
- Variability aware wear leveling
Techniques are presented that include determining, for data to be written to a nonvolatile memory, a ...
- python 获取字典值
一.Python中的字典遍历方法: info = { 'name':'xiaoming', 'sex':'nan', 'age':20, 'id':1} info2 = { 'name':'hhh', ...