当前位置:Gxlcms > html代码 > 多列样式布局_html/css_WEB-ITnose

多列样式布局_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:29人阅读

效果图如下:

代码如下:

  1   2   3       4     Document  5     127 128 129     

普通文档布局

130
Left
131
Right
132
133 134 135

行内布局使用inline-block

136
Left
137
Right
138
139 140 141

浮动布局float

142
Left:
143 width: 200px;
144 height: 100px;
145 float: left;
146 green;147
148
Right
149 width: 60%;
150 height: 100px;
151 float: right;
152 red;153
154
155 156 157

浮动布局float+margin正边距与多列布局

158

两列

159
160 Left Sidebar
161 float: left;
162 width: 200px;
163 height: 100px;
164 green;
165
166
167 height: 100px;168 red;169 margin-left: 200px;/*==等于左边栏宽度==*/170
171 Main Content172
173
174
175 182
183 height: 100px;184 red;185 margin-right: 200px;/*==等于右边栏宽度==*/186
187 Main Content188
189
190
191

三列

192
193 Left Sidebar
194 float: left;
195 width: 200px;
196 height: 100px;
197 green;
198
199 206
207
208 Main Content
209 height: 100px;
210 red;
211 margin: 0 200px;
212
213
214 215 216

浮动布局float+margin负边距与多列布局

217

两列

218
219

左侧定宽200px区块

220

width: 200px;221 float: left;222 margin-right: -100%;223 green;224

225
226
227
228

右侧主体自适应区块

229

.mainR:width: 100%;230 float: right;

231

.contentR:height: 100%;232 margin-left: 200px;233 red;234

235
236
237
238
239
240

左侧主体自适应区块

241

.mainL:width: 100%;242 float: left;

243

.contentL:height: 100%;244 margin-right: 200px;245 red;

246
247
248
249

右侧定宽200px区块

250

width: 200px;251 float: right;252 margin-left: -100%;253 green;254

255

256
257

三列

258
259

左侧定宽200px区块

260

width: 200px;261 float: left;262 margin-right: -100%;263 green;264

265
266
267
268

主体自适应区块

269

.mainR:width: 100%;270 float: left;271

272

.contentLR:height: 100%;273 margin-left: 200px;274 margin-right: 200px;275 red;276

277
278
279
280

右侧定宽200px区块

281

width: 200px;282 float: right;283 margin-left: -100%;284 green;285

286

287
288

人气教程排行