圣杯与双飞翼布局
- 三列布局,中间宽度自适应,两边定宽。
- 中间栏要在浏览器中优先展示渲染
- 允许任意列的高度最高
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必须为它自身宽度的负值。
不同之处在于解决“中间栏内容不被两侧遮挡”的问题思路不一样。
圣杯布局的解决遮挡思路
- 给定父元素一个padding,值的大小正好空出左右两列的宽度。
- 此时三列会被父元素的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;
}
双飞翼布局的解决遮挡思路
- 在.middle元素中再插入一个子元素。
- 给定子元素一个margin,值为左右两列元素的宽度。
1 | .container{ |
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>相比之前的实现过程,简洁易懂了许多。