curTain

实现三栏布局….

三栏布局的定义

三栏布局,顾名思义就是两边固定,中间自适应。

开写…..

1. 使用 BFC

实现原理:BFC 元素不会与浮动元素重叠。

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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
width: 180px;
height: 200px;
}
.left{
float: left;
background-color: rgb(104, 104, 104);
}
.right {
float: right;
background-color: rgb(133, 133, 133);
}
.main{
overflow: hidden;
height: 200px;
background-color: rgb(112, 112, 112);
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<!-- 先浮动,再创建 BFC -->
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>

2. 使用 float + margin 实现

实现原理:使用 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
width: 180px;
height: 200px;
}
.left{
float: left;
background-color: rgb(104, 104, 104);
}
.right {
float: right;
background-color: rgb(133, 133, 133);
}
.main{
/* 修改此行代码即可 */
margin: 0px 190px;
height: 200px;
background-color: rgb(112, 112, 112);
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>

3. flex 实现

实现原理:父元素使用 flex ,子元素定义 flex: 1 或 flex: auto 会自动填充宽度。

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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
width: 180px;
height: 200px;
}
.left{
background-color: rgb(104, 104, 104);
}
.right {
background-color: rgb(133, 133, 133);
}
.main{
flex: 1;
height: 200px;
background-color: rgb(112, 112, 112);
}
.warp {
display: flex;
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>

4. 使用 absolute + margin 实现

实现原理:同 float + 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
width: 180px;
height: 200px;
}
.left{
background-color: rgb(104, 104, 104);
position: absolute;
top: 0;
left: 0;
}
.right {
background-color: rgb(133, 133, 133);
position: absolute;
top: 0;
right: 0;
}
.main{
height: 200px;
margin: 0px 200px;
background-color: rgb(112, 112, 112);
}
.warp {
position: relative;
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>

5. 使用 Table 布局实现

实现原理:父元素展示为 table,子元素展示为 table-cell

注意:父元素宽度设置为 100%

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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
width: 180px;
height: 200px;
display: table-cell;
}
.left{
background-color: rgb(104, 104, 104);
}
.right {
background-color: rgb(133, 133, 133);
}
.main{
display: table-cell;
background-color: rgb(112, 112, 112);
}
.warp {
display: table;
width: 100%;
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>

6. 使用 inner-block + calc 实现

实现原理:当展示为 inner-block 时需要指定宽度,此时就使用 calc 计算宽度

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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
width: 180px;
height: 200px;
display: inline-block;
}
.left{
background-color: rgb(104, 104, 104);
}
.right {
background-color: rgb(133, 133, 133);
}
.main{
background-color: rgb(112, 112, 112);
width: calc( 100% - 400px );
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>

7. 使用 grid 布局

实现原理:grid 可以使用 1fr 划分等分和自适应

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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
height: 200px;
}
.left{
background-color: rgb(104, 104, 104);
}
.right {
background-color: rgb(133, 133, 133);
}
.main{
background-color: rgb(112, 112, 112);
height: 200px;
}
.warp {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>

8. 圣杯布局(难使)

实现原理:使用负 margin 使浮动元素重新定位,结合 position 定位元素….

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
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 30px;
color: rgb(224, 224, 224);
text-align: center;
line-height: 185px;
}
h1{
text-align: center;
line-height: 80px;
color: rgb(38, 52, 99);
font-size: 28px;
}
.left, .right{
height: 200px;
width: 180px;
}
.left{
background-color: rgb(122, 122, 122);
float: left;
position: relative;
margin-left: -100%;
left: -200px;
}
.right {
background-color: rgb(133, 133, 133);
position: relative;
float: left;
margin-left: -200px;
right: -220px;
}
.main{
background-color: rgb(112, 112, 112);
height: 200px;
width: 100%;
float: left;
}
.warp {
margin: 0px 200px;
}
</style>
</head>
<body>
<h1>三栏布局</h1>
<div class="warp">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

总结

最后还有一个双飞翼布局实现,但是代码布局写起来不直观,且 css 搭配复杂,不推荐……

需要知道 margin 为负值时的结果..

总的来说,还是不难的….

参考材料

面试官:请实现三栏布局,尽可能多的方式

详解 CSS 七种三栏布局技巧

margin为负值产生的影响和常见布局应用

margin负值的作用


 评论