网页布局基础_技术问答

首页免费课网页布局基础问答

网页布局基础

全部评论问答未解决精华

慕粉4235403

感觉就是弄对了代码，，也展示不出来呀，，有木有这感觉。。。

6 2-3 编程练习

2016-11-10

网页布局 4—6编程练习

已采纳回答 / 不一样唉

设置的200px是sidebar层宽度为180px加上#content与#sidebar之间的间距为20px而那580px是#content的自适应宽度

1 回答 486 浏览 4-6 编程练习

2016-11-10

Torry1

以上是我个人的理解，错了请大家指出~

0 3-3 横向两列布局

2016-11-10

Torry1

....
这个概念很重要，（但是老师没有特别强调）。了解了这个以后我们再看上面的问题。left和right被设置了左浮动，mainbody作为空的容器父元素，因为其中的两个子元素已经被“拿”了出来，所以缩成了一个点被left元素覆盖。而下面的紫色版权块依然在文档流中流向了left和right的右侧。所以实际上，紫色版权块并不是流动成了一个竖条，而是这个竖条所在的整个横向区域（只是被漂移在上面的left和right元素遮住了）。但由于里面的内联元素（文字）依然会围绕right元素流动，所以看起来好像是这个紫色的块元素变成了内联元素紧挨着right块元素一样。

14 3-3 横向两列布局

2016-11-10

Torry1

超字了，继续……

2 为什么同时设置left和right左浮动后mainbody消失而紫色版权块在右侧？
一个很重要的概念是【被设置float属性的块元素不在文档流中（相当于被拿了出来），所以流中的下一个块元素实际上是在被设置float属性的块元素的下面！但有意思的是，这个在下面的块元素中的内联元素（行元素）依然会围绕被漂移的块元素进行流动分布！！！】。这个概念很重要，（但是老师没有特别强调）。了解了这个以后我们再看上面的问题。left和right被设置了左浮动，mainbody作为空的容器父元素，因为其中的两个子元素已经被“拿”了出来，所以缩成了一个点被left元素覆盖。而下面的

11 3-3 横向两列布局

2016-11-10

Torry1

首先感谢老师贡献这么好的免费课程，而且老师的声音很好听！~ 本人也是小白，刚接触前端一个星期。这个案例非常好，但是有一些问题老师没有详细解释到。查了很多资料，总结一下奉献给大家。

1 为什么单独设置left块左浮动以后，right块依然在left下面？
因为right依然是块元素，要独占一行；

2 为什么同时设置left和right左浮动后mainbody消失而紫色版权块在右侧？
一个很重要的概念是【被设置float属性的块元素不在文档流中（相当于被拿了出来），所以流中的下一个块元素实际上是在被设置float属性的块元素的下面！但有意思的是，这个在下面的块元素中的内联元素（行元素）】

12 3-3 横向两列布局

2016-11-10

慕粉1242542

*{margin:0; padding:0;}
#wrap{width:970px; height: auto;}
#mainbody{position: relative; margin-top:15px;}
#left{position:absolute ;width:110px; }
#mid{position :absolute ;left: 123px;top: 0px; width:650px;border:1px solid #999;}
#right{position:absolute ; left:790px;border:1px solid #999;}

0 5-1 网页布局-编程挑战

2016-11-09

wusolong0

作为小白，觉得老师讲得很好，觉得好的请顶起来

6 2-2 盒子模型

2016-11-09

wzcxing

border ,padding+content内容，background-images，background-color，margin，3D盒子模型

0 2-3 编程练习

2016-11-09

左侧固定，右侧自适应，若内容没有把宽度撑开怎么办？

最新回答 / 慕丝2805873

maigin-left:100px;

1 回答 455 浏览 4-4 使用绝对定位实现横向两列布局

2016-11-09

慕粉途远

答案:
#wrap{margin:auto;}
#mainbody{position: relative;width: 100%;overflow: hidden}
#left{width:110px;float: left}
#mid{position:relative;width:650px;loat:left;margin-left:13px}
#right{position:absolute;top:0px;left:794px}
最后的距离应该是 left:110 + mid:650 + margin-left:13 + 边框:4 = right:794

1 5-1 网页布局-编程挑战

2016-11-09