如何用CSS进行网页布局_技术问答

首页免费课如何用CSS进行网页布局问答

如何用CSS进行网页布局

全部评论问答未解决精华

qq_云在飘_04040030

多列布局的时候，一个定宽，另一个自适应，要把定宽的拉出文档流，设置position属性为absolution；
然后把自适应宽度的margin值改为固定值就可以。
右侧先加载，左侧后加载：把右侧的html代码写在左侧的前面。

4 5-3 编程挑战

2016-10-09

weibo__派大星KO绷__04022067

中间的板块无法自适应居中，内容被左边挡住了

3 4-1 三列布局

2016-10-09

Cheryl333

.top{width:100%;height:100px;background:gray;}
.main{width:100%;height:500px;background:red;}
.left{height:500px;width:200px;position:absolute;background:blue;}
.right{height:500px;width:100%;margin:0 0 0 210px;background:green;position:absolute;}
.foot{width:100%;height:50px;background:orange;}

0 5-3 编程挑战

2016-10-08

qq_夏天的回忆_0

虽然看起来挺基础，但是实用价值高！

2016-10-08

Heroor

.top{width:100%;height:100px;background:#ccc;}
.main{width:100%;height:600px;background:red;}
.left{width:200px;height:600px;background:blue;position:absolute;top:100px;left:0px;}
.right{width:100%;height:600px;background:green;margin-left:215px;position:absolute;}

0 5-3 编程挑战

2016-10-07

放课后的下午茶

因为定位设置了absolute,脱离了文档流(名义上不在同一行内),所以中间main设置的margin是左右div的宽度长.

0 4-3 编程练习

2016-10-07

富宝森林

分两列布局，嵌套一个div，切一刀，分三列布局，嵌套2个div，切2下，3列布局时float可以在左侧使用，右侧不能用float：right，不然缩小浏览器窗口布局破坏了，即：3列布局可以左浮动定宽的+中间自适应margin的+固定位置定宽的。

2 4-1 三列布局

2016-10-07

富宝森林

待会试一试能不能左右浮动，中间margin设置左右值看看能不能做中间自适应，左右固定宽度的三列布局

0 5-1 混合布局

2016-10-07

CatcatHsu

RWD不是這樣吧! 淘寶網頁只有置中，並無做到RWD

0 1-1 内容简介

2016-10-07

超镜重生

自适应式什么意思呢？

0 5-3 编程挑战

2016-10-07

慕仰2503163

由于先加载右侧，所以不左侧的css代码即。.left{}中间没有position：absolute;没有这个的都是错误的，右侧自适应宽度会首先铺满一行（margin也算），从而把左侧后加载的挤到下一行。

0 5-3 编程挑战

2016-10-07

慕仰2503163

.foot{width:800px;background:#f90;margin:0 auto;}

0 5-3 编程挑战

2016-10-07

慕仰2503163

.top{height:100px;background:#ccc;}
.main{width:800px;height:400px;margin:0 auto;background:red;position:relative;}
.left{width:100px;height:400px;background:#00f;position:absolute;left:0;top:0;}
.right{height:400px;margin:0 0 0 110px;background:#9f9;}

0 5-3 编程挑战

2016-10-07