css 三列布局

发表于 | 分类于

常用的几种3列布局，即左右两边宽度固定，中间自适应，这也是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
<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
.container {
    padding-left: 210px;
    padding-right: 190px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    position: relative;
    left: -210px;
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    position: relative;
    right: -190px;
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

双飞翼布局

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
<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
    float: left;
    width: 100%;
}
.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 190px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

table 布局

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
<div class="container">
  <div class="sub"></div>
  <div class="main"></div>
  <div class="extra"></div>
</div>
.container{
  display: table;
  width: 100%;
  table-layout: fixed;
}
.sub{
  width: 180px;
  height: 300px;
  background-color: rgba(0, 255, 0, .5);
  display: table-cell;
}
.extra{
  width: 180px;
  height: 300px;
  background-color: #ddd;
  display: table-cell;
}
.main{
  width: 100%;
  height: 300px;
  background-color: rgba(255, 0, 0, .5);
  display: table-cell;
}

flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
  display: flex;
}
.sub{
  width: 180px;
  height: 300px;
  background-color: rgba(0, 255, 0, .5);
}
.extra{
  width: 180px;
  height: 300px;
  background-color: #ddd;
}
.main{
  flex: 1;
  height: 300px;
  background-color: rgba(255, 0, 0, .5);
}
显示 Gitment 评论