圣杯 && 双飞翼布局

圣杯与双飞翼布局

  • 三列布局,中间宽度自适应,两边定宽。
  • 中间栏要在浏览器中优先展示渲染
  • 允许任意列的高度最高
    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
    .container{
    height: 200px;
    }
    .middle{
    width: 100%; height: 200px;
    background: deeppink;
    float: left;
    }
    .left{
    width: 200px; height: 200px;
    background: blue;
    float: left;
    margin-left: -100%;
    }
    .right{
    width: 200px; height: 200px;
    background:darkorchid;
    float: left;
    margin-left: -200px;
    }


    <div class="container">
    <div class="middle">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    </div>

效果图
中间栏内容被遮挡

  • 圣杯布局与双飞翼布局解决问题的方案在前半段是相同的,也就是三栏全部浮动,左右两栏加上负margin让其与中间栏水平并排。注意.left的margin-left属性必须为-100%,而.right必须为它自身宽度的负值。

  • 不同之处在于解决“中间栏内容不被两侧遮挡”的问题思路不一样。

圣杯布局的解决遮挡思路

  1. 给定父元素一个padding,值的大小正好空出左右两列的宽度。
  2. 此时三列会被父元素的padding挤在更中央,于是我们给.left, .right元素加一个相对定位position:relative;,再利用left || right还原位置。
    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
    .container{
    height: 200px;

    padding: 0 200px 0 200px;
    }
    .middle{
    width: 100%; height: 200px;
    background: deeppink;
    float: left;
    }
    .left{
    width: 200px; height: 200px;
    background: blue;
    float: left;
    margin-left: -100%;

    position: relative;
    left: -200px;
    }
    .right{
    width: 200px; height: 200px;
    background:darkorchid;
    float: left;
    margin-left: -200px;

    position: relative;
    right: -200px;
    }

双飞翼布局的解决遮挡思路

  1. 在.middle元素中再插入一个子元素。
  2. 给定子元素一个margin,值为左右两列元素的宽度。
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
.container{
height: 200px;
}
.middle{
width: 100%; height: 200px;
background: deeppink;
float: left;
}
.left{
width: 200px; height: 200px;
background: blue;
float: left;
margin-left: -100%;
}
.right{
width: 200px; height: 200px;
background:darkorchid;
float: left;
margin-left: -200px;
}
.main-inner{
margin: 0 200px;
}

<div class="container">
<div class="middle">
<div class="main-inner">中间栏</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>

flex实现圣杯布局

  • 利用order将left元素设置为第一个
  • 关键在于设置中间列元素flex-grow:1;将剩余的空间指定中间列元素来填充。使三列布满整行;
  • 利用flex-basis属性来设置左右两侧元素的宽度。
    代码如下:

    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
    .container{
    height: 200px;
    display: flex;
    }
    .middle{
    background: deeppink;
    flex-grow: 1;
    }
    .left{
    order: -1;
    flex-basis: 200px;
    background: blue;
    min-width: 200px;
    }
    .right{
    flex-basis: 200px;
    background:darkorchid;
    min-width: 200px;
    }

    <body>
    <div class="container">
    <div class="middle">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    </div>
    </body>
  • 相比之前的实现过程,简洁易懂了许多。

文章作者: Luo Jun
文章链接: /2018/04/27/layouts/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Aning