当我把老师这个案例修改了一个值,就会出现一些问题

当我把老师这个案例修改了一个值,就会出现一些问题

当把代码修改一下:

.container{

padding: 0 420px 0 400px;

}

.left{
   width: 400px;
   background: #f00;
   margin-left: -100%;    
   left:-400px;     
}
.right{
   width:420px;
   background: #30a;
   margin-left:-420px;   
   right: -420px;   
}

就会出现网页界面缩小的时候,三个div就是会乱掉了

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,这个原因是因为body{min-width: 700px;} ,当窗口大小缩小到X+Y(X表示left的宽度,Y表示right的宽度)的时候,就会出现乱的现象。所以应该给#container设置一个最小宽度:

body{
        min-width:(2X+Y)px;
}

调整body的最小宽度就可以,注意两边不要设置太大。希望对你有帮助,祝学习愉快。

  • blazer_2015 提问者 #1
    非常感谢!
    2017-04-14 15:58:13
  • Furayray 回复 提问者 blazer_2015 #2
    请问body{ min-width:(2X+Y)px; },2X为啥是2倍?
    2017-05-04 11:57:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师