css的双飞翼布局
双飞翼布局的大概意思就是左右两边的内容是固定的，大小是固定的，
而中间的布局的随着页面的大小变化而自动变化的。
通过代码来解析：
1.四个div，也可以使用section，其中main,left.right为同一级的元素，inner为main的子元素。
2.main，left，right均左浮动。
3.main的宽度为100%，即占满这个页面。
4.设置left的margin-left:-100%;既让left与main在同水平线上，处在最左边。
5.设置right的margin-left:-200px，其中200px为right的宽度，让right停在最右侧。
6.设置main的子元素inner，width与main一样，margin的顺序为上、右、下、左，所以margin:0px 200px 0px 200px,
表示离左边200px,离右边200px,其中前者为left的宽度，后者为right的宽度。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta charset="utf-8" />
<title>双飞翼布局</title>
<style>
body {
margin: 0px;
padding: 0px;
min-width: 500px;
} #main {
width: 100%;
height: 200px;
background-color: red;
float: left;
} #left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
margin-left: -100%;
} #right {
width: 200px;
height: 200px;
background-color: green;
float: left;
margin-left: -200px;
} #inner {
margin: 0px 200px 0px 200px;
background-color: pink;
height: 200px;
word-break: break-all;
}
</style>
</head> <body> <div id="main">
<div id="inner">
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
</div>
</div>
<div id="left"></div>
<div id="right"></div> </body> </html>
css的双飞翼布局的更多相关文章
- div+css实现双飞翼布局
本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!D ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- css布局记录之双飞翼布局、圣杯布局
双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...
随机推荐
- 深度学习基础（十二）—— ReLU vs PReLU
从算法的命名上来说,PReLU 是对 ReLU 的进一步限制,事实上 PReLU(Parametric Rectified Linear Unit),也即 PReLU 是增加了参数修正的 ReLU. ...
- 小强的HTML5移动开发之路（32）—— JavaScript回顾7
BOM模型brower object model(浏览器对象模型),通过浏览器内置的一些对象可以操作浏览器本身. DOM是用来操作页面的,BOM是用来操作浏览器本身的. BOM是没有规范的,但是大部分 ...
- Eclipse 一直不停 building workspace... 完美解决总结
Eclipse 一直不停 building workspace... 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭 3.maven下载lib挂起 等..二.解决总结 (1).解决方法 ...
- 西方教育骗局，终于明白精英和普通人的残酷差别！（该校流传着一个数字——4。即“4小时睡眠、4杯咖啡、GPA4.0”——要想获得满分为4分的成绩，每天只睡4个小时，困了就喝4大杯咖啡）
2018-02-14 00:00英国/私立学校 你不知道的是:西方教育通过一个宽松的过程,偷偷完成了社会分层. 1 “中国学生真是太苦了!”我的同学李女士总是发出这样的感慨. 李女士是我中学同学,在一 ...
- 从张量积（tensor product）到多重线性代数（multilinear algebra）
记张量积的数学记号为 ⊗. 1. linear 假设 V,W 为线性空间(vector spaces),f:V→W是线性(linear)的,如果满足: f(v1+v2)=f(v1)+f(v2)f(αv ...
- Visual Studio for Mac
Visual Studio for Mac 初体验 你喜爱的 IDE,现在可用于 Mac 来自:https://www.visualstudio.com/zh-hans/vs/visual-stu ...
- nth-child与nth-of-type
nth-of-type这个CSS3伪类还从来没有用过,今天好好研究一番,发现还是有用的.现在下面的Demo <!DOCTYPE html> <html> <head> ...
- 【20.00%】【codeforces 44G】Shooting Gallery
time limit per test5 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- 执行hdfs namenode -importCheckpoint时出现No image directories available!
在https://issues.apache.org/jira/browse/HDFS-4705找到了答案需要在hdfs-site.xml中配置 <!--指定fsimage存储目录--> ...
- springboot内置tomcat验证授权回调页面域名
springboot内置tomcat验证公众号授权回调页面域名 解决方法: 网上下载一个tomcat,在server.xml文件中修改端口为springboot内置tomcat的端口号,复制验证文件到 ...