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

什么是双飞翼布局??

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. UIView的属性

    .alpha 设置视图的透明度.默认为1. // 完全透明 view.alpha = ; // 不透明 view.alpha = ; .clipsToBounds // 默认是NO,当设置为yes时, ...

  2. linux c++爬虫(一)

    int main(int argc, void *argv[]) { ]; ; char ch; ) { switch(ch) { case 'v': version(); break; case ' ...

  3. Hibernate笔记一:HIbernate配置-HelloWorld

    hibernate介绍: Hibernate是一个开源的对象关系映射框架,它对JDBC进行了轻量级的对象封装,使Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 它不仅提供了从java类到数 ...

  4. VR全景智慧城市

    随着虚拟现实产业的发展,我国对虚拟现实产业也越来越重视了.我国虚拟现实VR市场增长速度很快,市场活跃性很高,很多人都看好我国的虚拟现实VR市场,而且未来国内虚拟现实VR市场的销量还将有更大的增长.据赛 ...

  5. javaWeb学习总结(7)-关于session的实现:cookie与url重写

    本文讨论的语境是java EE servlet.我们都知道session的实现主要两种方式:cookie与url重写,而cookie是首选(默认)的方式,因为各种现代浏览器都默认开通cookie功能, ...

  6. Python字符处理

    字符串就是一系列字符.在python中,用引号括起来的都是字符串,这里的引号可以是单引号也可以双引号. 例如: >>> 'this is a string' 'this is a s ...

  7. iOS 开发之 protocol Buffer 数据交换

    前言: 从 14 年公司做项目时开始接触 Google 的 protocol Buffer,用了一段时间,后来到新公司就没有机会再使用了,趁着还没完全忘记,记录下. 简介:protocolbuffer ...

  8. js实现谷歌坐标转百度坐标

    js实现谷歌坐标转百度坐标 谷歌坐标转百度坐标 实现算法如下(以js为例,其他语言调整就行): //$lat 维度:$lng 经度  function GCJTobaidu($lat, $lng){ ...

  9. Python 关于字符串处理技巧

    1.使用多个字符或字符串作为分隔符分割字符串 str.split()方法只能制定单个字符或字符串作为分割符, re.split()方法可以用正则表达式作为分割符, re.split()跟str.spl ...

  10. ubuntu16.04 开发环境搭建

    1.更换源 sudo gedit /etc/apt/sources.list 2.更新系统 sudo apt-get update sudo apt-get dist-upgrade     3.移动 ...