今天看到以前写的一篇布局的例子分享给大家,双飞翼布局。

什么是双飞翼布局??

1.三列布局,中间宽度自适应,两边固定宽度;

2.中间栏在浏览器中优先展示渲染;

双飞翼布局的原理:

中间的盒子定100%的宽 float:left; 两边的盒子都float:left,定固定的宽;左边的个盒子margin-left:-100%; 右边的盒子margin-left:-自身的宽;

以下是例子:

   <div class="box"/>

         <div class="main">
                  <div class="main_box">我是主例</div>
         </div>
            <div class=“child_box">我是主例</div>
             <div class="col_box">我是附加例</div>
    </div>

HTML特殊布局--------双飞翼布局的更多相关文章

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

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

  2. css布局-双飞翼布局

    <div class="header">Header</div> <div class="bd"> <div clas ...

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

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

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

    圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...

  5. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  6. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. 【布局】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...

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

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

  9. CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

随机推荐

  1. OC中常见的结构体,以及NSNumber、NSValue、NSDate的使用

    常见的结构体 NSPoint和CGPoint NSSize和CGSize NSRect 和 CGRect NSPoint和CGPoint的使用 NSPoint和CGPoint是同义的 typedef ...

  2. [js笔记整理]正则篇

    一.正则基本概念 1.一种规则.模式 2.强大的字符串匹配工具 3.在js中常与字符串函数配合使用 二.js正则写法 正则在js中以正则对象存在: (1)var re=new RegExp(正则表达式 ...

  3. UART通信

    UART0串口调试过程:1.配置DTS节点 在Z:\rk3399\kernel\arch\arm64\boot\dts\rockchip路径下打开rk3399.dtsi文件,里面已经有UART0相关节 ...

  4. 常用的CI笔记

    1. thinkphp 封装好的$this->success(),就直接实现成功跳转,$this->error(),错误跳转.CI有show_error(),但是却不能直接实现跳转,所以需 ...

  5. Spring+SpringMVC+MyBatis深入学习及搭建(三)——MyBatis全局配置文件解析

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6874672.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(二)——My ...

  6. 【JAVAWEB学习笔记】01_HTML

    案例一:网站信息显示页面1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它 ...

  7. Hadoop中MapReduce作业流程图

    MapReduce的流程分为11个步骤,4个实体 1.客户端:编写MapReduce的代码,配置作业,提交作业 2.JobTracker:初始化作业,分配作业,与TaskTracker通信,协调整个作 ...

  8. 写给Android App开发人员看的Android底层知识(4)

    (八)App内部的页面跳转 在介绍完App的启动流程后,我们发现,其实就是启动一个App的首页. 接下来我们看App内部页面的跳转. 从ActivityA跳转到ActivityB,其实可以把Activ ...

  9. 根据wsdl文件用soapUi快速创建webService服务(有图有真相)

    最近公司业务上使用webservice 频繁.由于之前都是自己搭建webservice 自己定义提供给别人服务,现在则相反需求都是根据人家提供的wsdl 文件来生成 我们平台需要提供的接口.刚开始不知 ...

  10. stm32之IIC通信协议

    I2C(IIC,Inter-Integrated Circuit),两线式串行总线,由PHILIPS公司开发用于连接微控制器及其外围设备. 它是由数据线SDA和时钟SCL构成的串行总线,可发送和接收数 ...