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

什么是双飞翼布局??

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. linux服务器性能(网卡流量、CPU、内存、磁盘使用率)监控

    广义的网站的监控涵盖所有的非业务行为的数据采集与管理,包括数据分析师和产品设计师使用的网站用户行为日志.业务运行数据,以及供运维工程师和开发工程师使用的性能统计数据等. 本文主要是通过shell脚本来 ...

  2. mysql 中文出现?,设置utf8

    windows系统下的mysql: 1.找到mysql的配置文件:文件名可能不是my.ini(如my-default.ini),修改成my.ini. 打开配置文件,并编辑如下:(若是没有[client ...

  3. 读《Java并发编程的艺术》(一)

    离开博客园很久了,自从找到工作,到现在基本没有再写过博客了.在大学培养起来的写博客的习惯在慢慢的消失殆尽,感觉汗颜.所以现在要开始重新培养起这个习惯,定期写博客不仅是对自己学习知识的一种沉淀,更是在督 ...

  4. LeetCode:60. Permutation Sequence,n全排列的第k个子列

    LeetCode:60. Permutation Sequence,n全排列的第k个子列 : 题目: LeetCode:60. Permutation Sequence 描述: The set [1, ...

  5. 不依赖浏览器控制台的JavaScript断点调试方法

    随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...

  6. 浏览器播放rtsp流媒体解决方案

    老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧.    说这个之前,还是先说一下什么是rtsp协议吧. RTSP(Real Time Streaming ...

  7. centos修改无法用用户名和密码登录

    vi /etc/ssh/sshd_configPermitRootLogin这行改为PermitRootLogin yesPasswordAuthentication no上面的no改为yesUseP ...

  8. Openstack & Ansible

    Opennstack Open source software for creating private and public clouds Manages the servers at these ...

  9. mac下使用命令行打包出现bash gradle command not found的解决方案

    命令行打包的时候出现 bash gradle command not found这个问题,主要是因为gradle环境丢失.需要重新配置gradle的环境变量. 1. gradle路径的查找 然后gra ...

  10. KeepAlive随笔

    参数说明 :  1 . SocketTimeout               // 响应超时时间,超过此时间不再读取响应  2 . ConnectTimeout    // 链接建立的超时时间  3 ...