页面布局问题-慕课网

首页课程实战体系课手记专栏慕课教程

页面布局问题

来源：5-1 企业网站新闻详细页制作

清慕寒mio

2016-08-05 10:31

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

写回答关注

2回答

清慕寒mio

2016-08-06 09:12:16

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

0 0

林中静月下仙: 2016-08-05 13:24:33

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>

0 0

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157079 学习 · 2157 问题

查看课程

相似问题

网站的页面布局

回答 1

网页页码布局

回答 2

屏幕伸缩时如何让页面跟着改变布局

回答 3

html布局

回答 7

css整体布局

回答 1

打开慕课网App查看更多内容