zoukankan      html  css  js  c++  java
  • 圣杯布局和双飞翼布局

    解决问题
    1. 两侧定宽,中间自适应
    2. 中间栏优先加载渲染

    两者的共同点和区别

    圣杯布局和双飞翼布局都是三栏布局,三栏都左浮动。

    圣杯布局的三栏是独立的,互相之间没有覆盖。

    双飞翼布局的三栏不是独立的,left和right模块覆盖在中间容器的左右两端,像是两个翅膀一样。

    圣杯布局使用容器的padding-left和padding-right来为left和right模块留出位置,但是由于padding是三个模块的共同父亲产生,left模块和right模块使用margin-left:-100%和margin-left:-right宽度往回拉后,都被挤到了中间center容器的上面,必须再次使用position:relative来将各自复位。

    双飞翼布局的改进就是,对中间容器使用margin-left和marign-right来留出位置,而不是使用大容器的padding。由于中间容器浮动,还要沾满100%宽度,所以中间容器嵌套了一个内部容器,外部容器宽度依然100%,内部容器使用marign-left和margin-right来留出位置。这样,left和right容器,直接使用margin-left:-100%和margin-left:-right宽度就可以将其拉回到对应位置,没有了相对定位的麻烦。

    来历
    圣杯布局的来历是2006年发在a list part上的这篇文章:http://alistapart.com/article/holygrail
    双飞翼布局是淘宝UED对圣杯布局的改进,去除相对定位的性能影响:http://www.imooc.com/wenda/detail/254035
    双飞翼能够兼容到 IE6,其可以实现的各种布局,可以参考玉伯分享的 DEMO

    圣杯布局

    <div class="wrap">
        <div class="center con"></div>
        <div class="left con"></div>
        <div class="right con"></div>
    </div>
    $left: 190px;
    $right: 230px;
    
    body{min-width:(2*$left + $right);}
    .wrap{padding-left:$left;padding-right:$right;}
    .center{float:left;width:100%;background:#D6D6D6}
    .left{float:left;width:$left;margin-left:-100%;position:relative;right:$left;background:#77BBDD}
    .right{float:left;width:$right;margin-right:-$right;background:#FF6633}
    .con{height:300px;}

    双飞翼

    <div class="wrap">
        <div class="center con">
            <div class="center_in"></div>
        </div>
        <div class="left con"></div>
        <div class="right con"></div>
    </div>
    $left: 190px;
    $right: 230px;
    
    body{min-width:(2*$left + $right);}
    .center{float:left;width:100%;background:#D6D6D6}
    .center_in{margin-left:$left;margin-right:$right;}
    .left{float:left;width:$left;margin-left:-100%;background:#77BBDD}
    .right{float:left;width:$right;margin-left:-$right;background:#FF6633}
    .con{height:300px;}

    参考:http://www.cnblogs.com/cobby/archive/2012/05/09/2491812.html

       http://www.cnblogs.com/zhuyingyan/archive/2012/09/20/2694522.html

  • 相关阅读:
    数据库范式
    SQL基础
    JAVA流
    response.getWriter()和jsp中的out对象的区别
    JAVA排序(冒泡,直接选择,反转)
    Collections类常用方法
    JAVA集合
    JAVA面向对象(重载,重写 常用的 toString/equals)
    Java面向对象一(封装 继承 多态 类 对象 方法)
    JAVA基础
  • 原文地址:https://www.cnblogs.com/mengff/p/5219570.html
Copyright © 2011-2022 走看看