                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)

頁面布局問題

瀏覽器在縮小之后所有的布局都亂了，怎么破？其他人有這種情況嗎/

清慕寒mio

2016-08-05

源自：企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn) 5-1

關(guān)注問題我要回答

972

操作

收起

2 回答

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

可能我的問題問的太模糊了。直接上圖好了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

林中靜月下仙
2016-08-05

body下一級的元素css中都有float浮動(dòng)；而body的大小是隨瀏覽器窗口大小改變的，當(dāng)瀏覽器窗口縮小時(shí)，元素就會(huì)往下掉，這就是原因所在
下面舉個(gè)例子：

<!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>
當(dāng)你把這段代碼放在瀏覽器并且把瀏覽器窗口的縮小到1000px時(shí)就會(huì)往掉，

解決方法：
只需在浮動(dòng)的父級元素中添加下面的一個(gè)固定的元素包含著就可以：

<!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>