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

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

当把代码修改一下:

.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 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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