「前端开发」 -

CSS-Layout-09

CSS布局 —— 三列布局

Posted by eliochiu on October 25, 2022

三列布局是一种常用的布局方式,常见的三列布局有两种:前两列定宽且第三列自适应、中间自适应且两端定宽。

第一种布局方式和两列布局没什么区别,可使用浮动、绝对定位、flex、grid、table实现。这里主要讨论第二种布局方式。

公共的HTML代码:

1
2
3
4
5
<div class="container clearfix">
    <div class="left"></div>
    <div class="content">自适应</div>
    <div class="right"></div>
</div>

公共的CSS样式:

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
36
37
38
39
40
41
42
body {
    margin: 0;
}

.container {
    height: 100px;
    background-color: #eebefa;
}

.left {
    height: 100px;
    width: 200px;
    background-color: #f783ac;
}

.content {
    height: 100px;
    background-color: #d9480f;
}

.right {
    height: 100px;
    width: 200px;
    background-color: #c0eb75;
}

.left,
.content,
.right {
    font-size: 70px;
    line-height: 400px;
    text-align: center;
}

/* 清除浮动 */
.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

最终的效果:

双浮动 + BFC

左盒子左浮,右盒子右浮,中间盒子变成BFC。需要注意的是,浮动元素必须写在内容元素之前,否则会引起布局混乱,调整HTML为:

1
2
3
4
5
6
<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content">自适应</div>

</div>
1
2
3
4
5
6
7
8
9
10
11
.left {
    float: left;
}

.right {
    float: right;
}

.content {
    overflow: hidden;
}

双定位 + margin

左右盒子均绝对定位,中间盒子BFC。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
    position: relative;
}

.left {
    position: absolute;
    left: 0;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
    width: calc(100% - 400px);
}

.right {
    position: absolute;
    right: 0;

flex布局

1
2
3
4
5
6
7
.container {
    display: flex;
}

.content {
    flex: 1;
}

grid布局

1
2
3
4
.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
}

圣杯布局

圣杯布局是一种常见的布局方式,分别有header, footer, left, right, center,其中headerfooter定高,leftright定宽,center自适应。基本的DOM结构(注意center排在第一位):

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

最重要实现的效果:

圣杯布局的基本思路是:

  • headerfooter指定宽度为100%,高度为定值。
  • leftright指定宽度为定值,高度为容器的定高。
  • center指定宽度为100%。
  • 为三列添加浮动float: left,因为center宽度是容器100%因此无法和左右两列在一行
  • left添加margin-left: -100%,右盒子添加margin-left: -右盒子的宽度,将使左右盒子覆盖掉center盒子
  • 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 700px;
    padding: 0 250px;
}

header {
    width: 100%;
    height: 100px;
    background-color: bisque;
}

footer {
    width: 100%;
    height: 100px;
    background-color: #71c29d;
    clear: both;
}

.container {
    height: 300px;
    padding-left: 200px;
    padding-right: 150px;
}

.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background-color: pink;
}

.right {
    margin-left: -150px;
    right: -150px;
    width: 150px;
    background-color: greenyellow;
}

.center {
    width: 100%;
    background-color: skyblue;
}

.column {
    position: relative;
    float: left;
    height: 300px;
    line-height: 300px;
}

圣杯布局可以使用浮动、flex、grid实现,其中flex和grid实现非常简单,浮动实现比较复杂。

浮动实现圣杯布局的关键在于:

  • 三列要设置相对定位
  • left盒子left设为-左盒子宽度,right盒子right设为-右盒子宽度
  • left盒子margin-left设为-100%,right盒子margin-left设为-右盒子宽度