双飞翼布局的大概意思就是左右两边的内容是固定的,大小是固定的,

而中间的布局的随着页面的大小变化而自动变化的。

通过代码来解析:

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的双飞翼布局的更多相关文章

  1. div+css实现双飞翼布局

    本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!D ...

  2. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  3. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  4. css双飞翼布局

     双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...

  5. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  6. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  7. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  8. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  9. css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...

随机推荐

  1. OC常用数据类型大全解

    UI基础 OC常用数据类型 Block Block封装了一段代码,可以在任何时候执行 Block可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值.它和传统的函数指针很类似,但是有区别 ...

  2. Eclipse 一直不停 building workspace... 完美解决总结

    Eclipse 一直不停 building workspace... 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭  3.maven下载lib挂起 等..二.解决总结 (1).解决方法  ...

  3. 【基础练习】【线性DP】codevs1576 最长严格上升子序列题解

    连题目都不放了,就是标题中说的那样.裸题 于是直接上代码 暑假要来了 好好学习 --炉火照天地,红星乱紫烟. 赧郎明月夜.歌曲动寒川.

  4. ActivityManagerService的启动过程

    AMS对象随系统进程启动而构建,随着系统进程退出而消亡,可以说,AMS与系统进程共存亡. 先上一张总的启动时序图: 上图分为三个步骤: 初始化系统进程的运行环境; 初始化AMS对象; AMS对象启动的 ...

  5. Swift学习——Swift解释具体的基础(六)

    Optionals    可选 可选(它似乎并不如此翻译)它适用于那些值这种情况可能是空的,有两种情况一个可选:存在值并等于x,要么值不存在. 选配的概念在OC和C里面并没有.在OC中最接近的概念就是 ...

  6. MapReduce自定义InputFormat,RecordReader

    MapReduce默认的InputFormat是TextInputFormat,且key是偏移量,value是文本,自定义InputFormat需要实现FileInputFormat,并重写creat ...

  7. jdk 8 lambda表达式以及Predicate接口

    了解lambda之前先了解下什么是函数式接口,函数式接口即接口里必须有一个抽象方法(抽象的方法只能有一个,可以有其他的用default修饰的方法) jdk8里新增了一个@FunctionalInter ...

  8. 最近更新电脑管家开机速度约慢很多木有?$计算机管理-废话$.qmgc

    最近更新电脑管家开机速度约慢很多木有? 一旦开机速度是几十秒,由于前几天更新电脑管家,大约几十秒钟成为一个点开机时间! 同样在一个多垃圾清理桌面图标! 右键菜单也看不到属性 须要到下面位置查看: wa ...

  9. Massive Collection Of Design Patterns, Frameworks, Components, And Language Features For Delphi

    Developer beNative over on GitHub has a project called Concepts which is a massive collection of Del ...

  10. 2 WCF里面配置的含义

    1 首先介绍所谓的a,b,c. a就是address 地址: b binding 绑定的协议 譬如http  tcp udp 利用这些协议方式请求address: c contract  代表请求的规 ...