三栏布局，左右栏宽为300px，中间自适应

2019-12-21 分类：CSS 作者：管理员阅读（1000）

1. flexbox 弹性伸缩盒子
2. table 表格布局
3. absolute 绝对定位
4. grid网格布局
5. float 浮动布局

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局左右宽度300px,中间宽度自适应</title>
</head>
<style>
*{margin: 0;padding: 0;}
/* flex */
.flex-container{
height: 100px;
background-color: bisque;
display: flex;
}
.flex-left,.flex-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;
}
.flex-middle{
flex: 1;
background-color: #e77f67;
}
/* table */
.table-container{
width: 100%;
height: 100px;
background-color: bisque;
display: table;
}
.table-left,.table-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;
display: table-cell;
}
.table-middle{
width: 100%;
height: 100px;
background-color: #e77f67;
}
/* float */
.float-container{
width: 100%;
height: 100px;
background-color: bisque;
}
.float-left,.float-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;

}
.float-right{
float: right;
}
.float-left{
float: left;
}
.float-middle{
height: 100px;
background-color: #e77f67;
}
/* position */
.position-container{
width: 100%;
height: 100px;
background-color: bisque;
position: relative;
}
.position-left,.position-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;
position: absolute;
}
.position-left{
left: 0;
}
.position-right{
right: 0;
}
.position-middle{
height: 100px;
position: absolute;
left: 300px;
right: 300px;
background-color: #e77f67;
}
/* 第五种 grid */
.grid-container{
height: 100px;
background-color: bisque;
display: grid;
grid-template-columns: 300px auto 300px;
}
.grid-left,.grid-right{
background-color: #0fb9b1;
}
.grid-middle{
background-color: #e77f67;
}
</style>
<body>

<div class="flex-container">
<div class="flex-left"></div>
<div class="flex-middle">第一种 flex</div>
<div class="flex-right"></div>
</div>

<div class="table-container">
<div class="table-left"></div>
<div class="table-middle">第二种 table</div>
<div class="table-right"></div>
</div>

<div class="float-container">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-middle">第三种 float</div>
</div>

<div class="position-container">
<div class="position-left"></div>
<div class="position-middle">第四种 position</div>
<div class="position-right"></div>
</div>

<div class="grid-container">
<div class="grid-left"></div>
<div class="grid-middle">第五种 grid</div>
<div class="grid-right"></div>
</div>
</body>
</html>

111

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏