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

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

通过代码来解析：

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. python2代码转换python3(2018新)

    Python 3自带了一个叫做2to3.py,这个脚本会将你的Python 2程序源文件作为输入,然后自动将其转换到Python 3的形式,可进行to3.py -w 文件夹路径 若文件名2to3-sc ...

  2. python io操作

    一次性读取 # 读取文件 # 默认打开文件的方式是只读 file = None try: file = open("f:/test.sql") print(file.name) # ...

  3. sparksql dataset

    java /** *2.0之后使用sparksession即可,不需要再去创建sqlcontext *@author Tele * */ public class Demo { private sta ...

  4. 一个里程碑，新网站实现全站https

    本地验证node服务没问题后,上传到阿里云服务器上,发现无法访问.一开始以为是SSL证书有问题,去腾讯云SSL证书重新下载,还是不行.然后改node应用文件代码app.js,猜测是crt证书应该改成p ...

  5. 在Windows中安装MinGW-w64（有图，一步一步）

    在Windows中安装MinGW-w64 发表回复 如需配合Sublime Text 3编译C程序, 请参考本站文章: 使用Sublime Text 3与MinGW-w64编译C语言程序 MinGW, ...

  6. 一个简易版的Function.prototype.bind实现

    重新看<JavaScript设计模式与开发实践>一书,第32页发现个简易版的Function.prototype.bind实现,非常容易理解,记录在这了. Function.prototy ...

  7. .NET CORE的TagHelper智能提示

    VisualStudio2017下ASP.NET CORE的TagHelper智能提示不能使用的解决办法   之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来 ...

  8. ASP.NET Page执行顺序(ASP.NET生命周期)

    此部分说明的生命周期只有部分: ---引用MSDN 阶段 说明 页请求 页请求发生在页生命周期开始之前.用户请求页时,ASP.NET 将确定是否需要分析和编译页(从而开始页的生命周期),或者是否可以在 ...

  9. WebView 联系（要么button）至 Activity 跳跃在几个方面

    第一 ,写一个 JavaScriptinterface 分类.内实现WebView至Activity 页面跳转 public class JavaScriptinterface { Activity ...

  10. NLP（paper + code）

    0. 开源的库 genism keras wrapper of theano/TensorFlow 1. CNN for NLP Convolutional Neural Networks for S ...