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

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

如何用CSS进行网页布局

全部评论问答未解决精华

慕粉2250124430

看这节课有种看蒙德里安的画的感觉

1 5-1 混合布局

2016-10-11

fenpho

自适应即100%，左侧定值使用absolute，右侧自适应利用margin-left即可。
.top{height:100px; background:#ccc}
.left{width:200px; height:500px; background:blue; position:absolute; left:0;}
.right{margin-left:210px; height:500px; background:#9C9;}
.foot{height:100px; background:#F63;}

0 5-3 编程挑战

2016-10-11

qq_看啥看_04138324

这个老师讲课好像是在哄孩子我们小学老师就是这样说话好亲切

1 3-1 二列布局

2016-10-11

小虾米zheng

引用：【@Bingsman】
从上到下我全部都试了一遍，就这个算是比较正确的答案，其他出现横滚动条的都是错误的答案。
这个答案可能要改造下，需要在main里添加position:relative; left里将top改为top:0px; 这样这里的top就和header无关了。否则如果header里的高度改了，left里的top也要跟着改。

1 5-3 编程挑战

2016-10-11

如果我用float属性左右两边的好像也可以

已采纳回答 / weibo_石头是stone_03478

不可以，left左浮动，脱离了文档流，没有问题。middle是<div>块级元素，紧跟着left，但是会占满一行。right紧跟着，会另起一行，浮动居右。虽然将middle在body部分中放在left、right后面，表面上可以满足结果，但是middle中的内容变多了，就会占据right中空间。

3 回答 1400 浏览 4-1 三列布局

2016-10-11

为什么添加父级div，并将父级div设置剧中，然而并没有剧中效果

最新回答 / 慕粉2035072466

首先，你设置了 .left 和 .right 浮动（float），它们脱离了文档流，可以想象为悬浮在一个页面，和下面的.main 不在一个层面上。至于.main你设置了witdh: 800px;margin:0 auto;，它实际上是居中了，只是 ....

3 回答 853 浏览 3-1 二列布局

2016-10-10

YeungSyuNie

个人认为答案与问题有瑕疵。

0 5-3 编程挑战

2016-10-09

轩de4104943

.top{background:black;height:100px;}
.main{height:600px;background:red;}
.left {width:200px;height:600px;float:left;background:blue;position:absolute;left:0px;top:100px}

.right{height:600px;background:grey;margin-left:210px;}
.foot{height:50px;background:orange;}

0 5-3 编程挑战

2016-10-09

我发现main标签里套了个p标签以后，main块的背景色就无法接到顶部了

已采纳回答 / 慕UI5501848

p 元素会自动在其前后创建一些空白。<...code...>取消默认样式，可以解决这问题。

1 回答 1388 浏览 4-3 编程练习

2016-10-09

qq_云在飘_04040030

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

4 5-3 编程挑战

2016-10-09

weibo__派大星KO绷__04022067

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

3 4-1 三列布局

2016-10-09

中间的板块不显示内容了

已采纳回答 / 慕虎2019040

你的代码截图出来看一下

1 回答 457 浏览 4-1 三列布局

2016-10-09

三列自适应布局，左中右宽度分别设置15%，60%，25%，为什么右边和中间有条缝呢

已采纳回答 / nothingbok

调整一下窗口的宽度，宽度为某些值时，会出现类似问题。

1 回答 1861 浏览 4-3 编程练习

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