                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

图一是代码，图二是结果。和参考代码差不多，但是就是right总掉下去，求大神告知原因。+1积分,

大家来看看

Blizzard_lihe

2016-08-28

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

2483

操作

收起

5 回答

tang90 回答被采纳 +3 积分
2016-08-28

因为middle是在标准文档流中，所以middle块级元素占一行，后面的div只能从下面开始了。我猜测应该是这个原因。把middle改成相对或者绝对定位，使它脱离标准文档流应该可以。

0 回复有任何疑惑可以回复我~

收起回答

Blizzard_lihe 提问者

非常感谢！

2016-08-28 回复有任何疑惑可以回复我~

tang90
2016-08-28

因为老师的代码中main在right后面，所以main这个div可以放到left和right的这一行中，因为left和right已经脱衣标准文档流了。而你的代码中，middle在right前面的，middle这个div占据整行后，这行不能再放其他元素了

0 回复有任何疑惑可以回复我~

收起回答

Blizzard_lihe 提问者

没问题，成功了，万谢

2016-08-28 回复有任何疑惑可以回复我~

Blizzard_lihe 提问者
2016-08-28

这段是老师给的代码，他的就可以，我的那段和他差不多啊，left和right都用float,main用margin,最后底部清除浮动，不理解我的错出在哪里？？？

1 回复有任何疑惑可以回复我~

收起回答

Blizzard_lihe 提问者
2016-08-28

只能采纳一个，谢谢楼下这段撸代码的人，好人一生平安。

1 回复有任何疑惑可以回复我~

收起回答

慕用8241493
2016-08-28

body{margin: 0;padding: 0;}
   .header,.footer{height: 40px;background: pink;}
   .left,.middle,.right{height: 500px;}
   .left{width: 20%;background: blue; position: absolute;top: 40px; left: 0;}
   .middle{margin: 0 20%;background: black;}
   .right{width: 20%;background: #aaa;position: absolute;top: 40px;right: 0;}
   .footer{clear: both;}