show turns
show you the code
<!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>Document</title>
<style>
.wrapper {
background: #eee;
}
.left {
background: red;
width: 100px;
}
.right {
background: yellow;
}
</style>
</head>
<body>
<h1>左边固定宽，右边自适应宽，8种方式（不限于）</h1>
flex
<style>
.wrapper1 {
display: flex;
}
.left1 {
}
.right1 {
flex: 1;
}
</style>
<div class="wrapper wrapper1">
<div class="left left1">左</div>
<div class="right right1">右</div>
</div>
calc + inline-block
<style>
.wrapper2 {
font-size: 0;
}
.left2,
.right2 {
display: inline-block;
font-size: 14px;
}
.right2 {
width: calc(100% - 100px);
}
</style>
<div class="wrapper wrapper2">
<div class="left left2">左</div>
<div class="right right2">右</div>
</div>
calc + float
<style>
.wrapper3 {
overflow: hidden;
}
.left3,
.right3 {
float: left;
}
.right3 {
width: calc(100% - 100px);
}
</style>
<div class="wrapper wrapper3">
<div class="left left3">左</div>
<div class="right right3">右</div>
</div>
float+margin-left
<style>
.wrapper4 {
overflow: hidden;
}
.left4 {
float: left;
}
.right4 {
margin-left: 100px;
}
</style>
<div class="wrapper wrapper4">
<div class="left left4">左</div>
<div class="right right4">右</div>
</div>
absolute+margin-left
<style>
.wrapper5 {
position: relative;
}
.left5 {
position: absolute;
}
.right5 {
margin-left: 100px;
}
</style>
<div class="wrapper wrapper5">
<div class="left left5">左</div>
<div class="right right5">右</div>
</div>
margin+padding+float+特殊布局
<style>
.left6 {
float: left;
}
.right6 {
padding-left:100px;
margin-left:-100px;
}
</style>
<div class="wrapper wrapper6">
<div class="right right6"><div class="left left6">左</div>右</div>
</div>
grid
<style>
.wrapper7 {
display: grid;
grid-template-columns: 100px 1fr;
align-items: start;
}
.left7 {
grid-column: 1;
}
.right7 {
grid-column: 2;
}
</style>
<div class="wrapper wrapper7">
<div class="left left7">左</div>
<div class="right right7">右</div>
</div>
table
<style>
.wrapper8 {
display: table;
}
.left8 {
}
.right8 {
display: table-cell;
width: 100%;
}
</style>
<div class="wrapper wrapper8">
<div class="left left8">左</div>
<div class="right right8">右</div>
</div>
</body>
</html>
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159