Css Block

圣杯布局

所谓圣杯布局，就是左右列宽度固定，中间列宽度随屏幕自适应的三列布局。

方法 1


left
right
middle
<div class="grail">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
</div>
1
2
3
4
5
.grail div {
    height: 300px;
}
.grail .left {
    width: 200px;
    background-color: #ff4f4f;
    float: left;
}
.grail .right {
    width: 150px;
    background-color: #68b1ed;
    float: right;
}
.grail .middle {
    background-color: #3eaf7c;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法 2


middle
left
right
<div class="grail">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div style="clear:both"></div>
1
2
3
4
5
6
.grail {
    padding-left: 200px;
    padding-right: 150px;
}
.grail div {
    float: left;
    height: 300px;
}
.grail .middle {
    width: 100%;
    background-color: #3eaf7c;
}
.grail .left {
    width: 200px;
    background-color: #ff4f4f;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
.grail .right {
    width: 150px;
    background-color: #68b1ed;
    margin-right: -150px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

方法 3


left
right
middle
<div class="grail">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
</div>
1
2
3
4
5
.grail div {
    height: 300px;
}
.grail .left {
    width: 200px;
    background-color: #ff4f4f;
    float: left;
}
.grail .right {
    width: 150px;
    background-color: #68b1ed;
    float: right;
    margin-left: -1px;
}
.grail .middle {
    background-color: #3eaf7c;
    display: table-cell;
    width: 99999px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

方法 4


我是左侧
我是中间
我是右侧
<div class="grail">
	<div class="left">我是左侧</div>
    <div class="middle">我是中间</div>
	<div class="right">我是右侧</div>
</div>
1
2
3
4
5
.grail {
    display: flex;
}
.grail div {
    height: 300px;
}
.grail .left {
    width: 200px;
    background-color: #ff4f4f;
}
.grail .middle {
    flex-grow: 1;
    background-color: #3eaf7c;
}
.grail .right {
    width: 150px;
    background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法 5


我是中间
我是左侧
我是右侧
<div class="container column">
    <div class="middle">我是中间</div>
</div>
<div class="left column">我是左侧</div>
<div class="right column">我是右侧</div>
<div style="clear:both"></div>
1
2
3
4
5
6
.container {
    width: 100%;
}
.column {
    float: left;
}
.middle, .left, .right {
    height: 300px;
}
.middle {
    margin-left: 200px;
    margin-right: 150px;
    background-color: #3eaf7c;
}
.left {
    width: 200px;
    margin-left: -100%;
    background-color: #ff4f4f;
}
.right {
    width: 150px;
    margin-left: -150px;
    background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

方法 6


我是中间
我是左侧
我是右侧
<div class="middle column">我是中间</div>
<div class="left column">我是左侧</div>
<div class="right column">我是右侧</div>
<div style="clear:both"></div>
1
2
3
4
.column {
    float: left;
    height: 300px;
}
.middle {
    margin-left: 200px;
    margin-right: 150px;
    width: calc(100% - 350px);
    background-color: #3eaf7c;
}
.left {
    width: 200px;
    margin-left: -100%;
    background-color: #ff4f4f;
}
.right {
    width: 150px;
    margin-left: -150px;
    background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方法 7


我是中间
我是左侧
我是右侧
<div class="middle column">我是中间</div>
<div class="left column">我是左侧</div>
<div class="right column">我是右侧</div>
<div style="clear:both"></div>
1
2
3
4
.column {
    float: left;
    height: 300px;
}
.middle {
    padding-left: 200px;
    padding-right: 150px;
    box-sizing: border-box;
    width: 100%;
    background-color: #3eaf7c;
}
.left {
    width: 200px;
    margin-left: -100%;
    background-color: #ff4f4f;
}
.right {
    width: 150px;
    margin-left: -150px;
    background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

← 多列等高 →