双飞翼布局是一种比较灵活的布局，始于淘宝UED，玉伯提出的，他着重介绍的是双飞翼栅格布局。

　　三列布局为“双飞燕”布局，可以把三栏比作一只鸟，main部分相当是于鸟的身体，而left与right就是鸟的“翼”了，鸟想要平衡地飞翔就要把主体位置给摆正确，然后在“翼”的作用下开始起飞。布局也是一样的，我们也要先把主体给摆好，然后再合理地调整双翼，这样整体动作才会比较和谐。

　　双飞翼布局的效果图如下所示：

　　　　　　　　　　　　　　　　

　　HTML代码如下所示：

 <div class="wrap">
     <div class="main">主体</div>
     <div class="left">左边</div>
     <div class="right">右边</div>
 </div>

　　实现要求：主间部分内容的宽度是要自适应的，左、右两边宽度分别为20%，30% .方法我想到了两种：1）是利用margin负值。2)利用相对定位

　　CSS样式部分的代码：（最初第一次的写法）

  <style>
         /* 这里的高度可以根据自己的实际情况来设置 */
         .main,.left,.right { float:left;  height:400px; }
         /* 主体的宽度要自适应，然后设置左右两边的“翼”即可 */
         .main { width:100%;  background:lightblue; text-align: center}
         .left { width:20%; background:lightcoral;}
         .right { width:30%; background:lightgreen; }
     </style>

　　但是这样写完后，并不是上面的效果，而是如下图所示的效果：

　　　　　　　　　　　

　　利用margin负值的奇妙用法，下面看如下的代码：

　　（1）给左侧设置 margin-left:-100%，主体的宽度是100%，相当于左侧向给左移了，刚好实现左边与主体的对齐

  .left { width:20%; background:lightcoral;margin-left:-100%;}

　　　（2）右侧自身的宽度，相当于是自己向左移了自身的一个宽度，刚好实现右边与main的对齐

 .right { width:30%; background:lightgreen;margin-left:-30%; }

　　　（3）主体的位置设置？它的左边及右边部分元素是会被left/right挡住的，所以我们还必须在main里面再添加一个div(class="mainIn")，设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。

　　完整版代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS双飞翼布局</title>
     <style>
         /* 这里的高度可以根据自己的实际情况来设置 */
         .main,.left,.right { float:left;  height:400px; margin: 0 -30% 0 -20%}
         /* 主体的宽度要自适应，然后设置左右两边的“翼”即可 */
         .main { width:100%;  background:lightblue;}
         .left { width:20%; background:lightcoral;margin-left:-100%;}
         .right { width:30%; background:lightgreen;margin-left:-30%; }
　　　　　　 .mainIN{maigin:0 30% 0 20%} 

     </style>
 </head>
 <body>
 <div class="wrap">
     <div class="main"><div class = "mainIn">主体</div></div>
     <div class="left">左边</div>
     <div class="right">右边</div>
 </div>
 </body>
 </html>

css双飞翼布局的更多相关文章

  1. CSS 双飞翼布局

    10 Jul 2016 » CSS 双飞翼布局:总共分三栏,左侧栏Left,中间主栏Main,右侧栏Right 第一步,建立三个div,不过注意,中间Main需要加一个wrap div. 整个结构看起 ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  9. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

随机推荐

  1. Java EE之servlet处理表单提交的请求

    1.在源包下新建一个Servlet页,取名为LoginServlet: package weinidingServlet;                            //该Servlet所 ...

  2. solr4.5安装配置 linux+tomcat6.0+mmseg4j-1.9.1分词

    首先先介绍下solr的安装配置 solr下载地址 (我这用的solr-4.5.0) 运行环境 JDK 1.5或更高版本 下载地址(Solr 4以上版本,要求JDK 1.6)  我用的JDK1.6 ) ...

  3. 2016-2-10 tomcat基础学习

    安装tomcat服务器(1)配置 JAVA_HOME指向你的jdk主目录 也可以在startup.bat文件中设置JAVA_HOME环境变量. 首次使用JAVA_HOME前设置即可.set JAVA_ ...

  4. 未能添加对***.dll的引用 问题解决方法

    这个不是什么新问题了,这里说一下我遇到的这个操蛋事. 转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/6236263.html 我做的和往常一样,找到SDK开发 ...

  5. Git Pull 错误

    当是用TortoiseGit 从多个源 Pull过数据后, 不能再使用默认的 Remote origin选项进行Pull操作. 每个工程 Commit\Push前需要Pull操作时, 采用独立的URL ...

  6. leetcode 199 :Binary Tree Right Side View

    // 我的代码 package Leetcode; /** * 199. Binary Tree Right Side View * address: https://leetcode.com/pro ...

  7. iOS 中 ARC 项目 兼容 MRC

    iOS 项目中MRC 和 ARC 项目的代码兼容问题: 1.ARC 项目中导入 MRC 第三方类的时候要在此类上添加 -objc-arc. 2.MRC 项目中导入 ARC 类的时候要在次类上添加 -f ...

  8. bzoj 3821: 玄学

    题目大意 有一个长度为 n 数列,有若干个事件,事件分为操作和询问两种, 一次操作是把数列[l...r] 区间中的每个元素x变成 ax + b mod p. 一次询问是询问 执行了 第l 次到第r次操 ...

  9. 第一个独立开发的游戏 怪斯特：零 已经上线APP STORE！

    今天是个值得纪念的日子,而且是双喜临门 2年多来的摸爬滚打,终于有了回报 第一喜:自己独立开发的游戏 怪斯特:零 已经通过审核并上架APP STORE! 第二喜:迈入了自己期待2年之久的游戏行业,年后 ...

  10. 【Python】引用计数

    一.概述 要保持追踪内存中的对象,Python使用了引用计数这一简单的技术. 二.引用计数的增减 2.1 增加引用计数 当对象被创建并(将其引用)赋值给变量时,该对象的引用计数被设置为1. 对象的引用 ...