总结圣杯布局和双飞翼布局

    很久以前就知道这两个布局,但一直觉得这两个布局有点奇怪,可能是因为以前没有用过这种方法。但是因为兼容会很好,而且可以自适应中间区块,所以好像还是很多人用。今天动手写了demo,虽然比较容易就能做出来,但这里面的有些地方还是感觉怪怪的,最后有我的不明白的地方。下面是具体的两种写法以及区别。


    圣杯布局

    圣杯布局是一种常用的网页布局,他可以由现有的技术来实现,现有的布局多多少少都有些缺点,所以找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。注意下这里left和center的位置放置。其实主要思想就是让三列布局都浮动后,设置中间浮动的元素的宽度为100%,利用padding留出两边left和right的距离,再利用定位的思想把左右两个盒子放在该放的位置上。

    1
    2
    3
    4
    5
    6
    7
    <div class="header"></div>
    <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="footer"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    body{
    min-width: 640px; /*两倍的左边距离加上右边距离,如果不加,当resize窗口的时候会出现问题*/
    }
    .header,.footer{
    background: red;
    height: 50px;
    }
    .container{
    padding-left: 220px;
    padding-right: 200px;
    }
    .center,.left,.right{
    float:left;
    min-height: 500px;
    position:relative;
    }
    .center{
    width:100%;
    background: yellow;
    opacity: 1;
    }
    .left{
    width:220px;
    background: lightgreen;
    margin-left: -100%;
    right:220px;
    }
    .right{
    width:200px;
    background: blue;
    margin-right: -200px;
    }
    .footer{
    clear:both;
    }

    布局样式


    双飞翼布局

    双飞翼布局由淘宝UED提出来。如果把三栏布局当做一个大鸟的话,可以吧main当做鸟的身体,sub和extra当做鸟的两个翅膀,这个布局的实现思路是先把最重要的身体部分放好,然后再将翅膀移动到适当的地方。是在圣杯布局上的修改,不再使用relative和padding,改用直接添加一个元素inner,并用margin来实现。之所以这么改我猜是因为一旦我们设置了relative就很难再对其做别的定位。
    主要代码如下:这里添加了inner,设置center为100%以后,再对inner设置margin,这样就可以使内部元素不受影响,不会被盖住。注意注释掉的就是圣杯布局的部分写法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="header"></div>
    <div class="container">
    <div class="center">
    <div class="inner">fad</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="footer"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    body{
    min-width: 640px;
    }
    .header,.footer{
    background: red;
    height: 50px;
    }
    .center,.left,.right{
    float:left;
    min-height: 300px;
    /*position:relative;*/
    }
    .center{
    background: yellow;
    width: 100%;
    }
    .left{
    width:220px;
    background: lightgreen;
    /*margin-left: -100%;
    right:220px;*/
    margin-left: -100%;
    }
    .right{
    width:200px;
    background: blue;
    margin-left: -200px;
    }
    .footer{
    clear:both;
    }
    .inner{
    margin:0px 200px 0px 220px;
    }

    我的疑问

    疑问1,正常情况下,如果盒子非浮动,margin-left设置成-9000px(举个例子),就会隐藏了,但是因为这个里面的center是浮动的,所以当left的margin-left设置成比自身宽度要宽的时候就会往上移,也就形成了圣杯布局,可以用chrome不断缩小margin-left的值试试,开始是隐藏,一旦大于自身宽度就会往上了。可是为什么是呢?
    疑问1
    疑问2,按道理来说左边和右边是固定的宽度,为什么我缩小到一定的程度的时候,是右边先减少宽度,中间减少宽度,最后才是左边减小宽度,而不是中间先减小宽度呢?
    疑问2