                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

页面布局问题

浏览器在缩小之后所有的布局都乱了，怎么破？其他人有这种情况吗/

清慕寒mio

2016-08-05

源自：企业网站综合布局实战 5-1

关注问题我要回答

928

操作

收起

2 回答

清慕寒mio 提问者
2016-08-06

可能我的问题问的太模糊了。直接上图好了

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

收起回答

林中静月下仙
2016-08-05

body下一级的元素css中都有float浮动；而body的大小是随浏览器窗口大小改变的，当浏览器窗口缩小时，元素就会往下掉，这就是原因所在
下面举个例子：

<!DOCTYPE html>
 <html> 
 <head> 
 <meta charset="utf-8" />
  <title>HTML</title>
  <style> div{ float: left; width: 500px; border: 1px solid red; height: 100px; } 
  </style>
  </head><body><div></div><div></div></body></html>
当你把这段代码放在浏览器并且把浏览器窗口的缩小到1000px时就会往掉，

解决方法：
只需在浮动的父级元素中添加下面的一个固定的元素包含着就可以：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>HTML</title> 
<style> 
.top{ width: 1190px; } 
.top div{ float: left; width: 500px; border: 1px solid red; height: 100px; } 
</style> 
</head> 
<body><div> <div></div> <div></div> </div> </body> </html>