CSS布局（以百分比表示）在Firefox中顯示的右邊距較小
[英]CSS layout in percent shows smaller right margin in Firefox
問題描述
在編寫一些CSS腳本時，我遇到了一些挑戰； 確實，右邊距看起來小於左邊距，而兩者都設置為5％！
使用Firefox 35.0.1
body { width: 100%; padding: 0; margin-top: 5%; background: #fff; } #main-content { float: left; width: 57%; background: #a7cbd3; margin-left: 5%; min-height: 777px; } #side { float: right; width: 33%; background: #0081a9; margin-right: 5%; min-height: 777px; }
<div id="main-content">Main content</div> <div id="side">Side</div>
請問您的建議嗎？
先感謝您！
1 個解決方案
解決方案1
1 已采納 2015-02-18 17:26:47
您必須重置默認body邊距，以防止內容溢出。
body {
margin: 5% 0 0; /* added margin-top 5% as previous rule */
}
body { width: 100%; padding: 0; margin: 5% 0 0; background: #fff; margin: 0; } #main-content { float: left; width: 57%; background: #a7cbd3; margin-left: 5%; min-height: 777px; } #side { float: right; width: 33%; background: #0081a9; margin-right: 5%; min-height: 777px; }
<html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="main-content">Main content</div> <div id="side">Side</div> </body> </html>
CSS百分比布局錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.