課程
/前端開發
/HTML/CSS
/企業網站綜合布局實戰
瀏覽器在縮小之后所有的布局都亂了，怎么破？其他人有這種情況嗎/
2016-08-05
源自：企業網站綜合布局實戰 5-1
正在回答
可能我的問題問的太模糊了。直接上圖好了
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>
舉報
本課程重點介紹HTML/CSS實現常見企業網站布局的方法
1 回答網站的頁面布局
2 回答網頁頁碼布局
3 回答屏幕伸縮時如何讓頁面跟著改變布局
7 回答html布局
1 回答css整體布局
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-08-06
可能我的問題問的太模糊了。直接上圖好了
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>