ホームページ > 記事 > ウェブフロントエンド > すみません、CSSレイアウトの幅の合計が親フレームを超えていないのに、位置がずれるのはなぜですか? _html/css_WEB-ITnose
すみません、CSSレイアウトの幅の合計が親フレームを超えていないのに、位置がずれるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:43:191112ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0; border: 0; } .layoutDemo { width: 960px; background: #000; } #left { width: 220px; float: left; margin-right: 20px; background: green; border: 0; } #main-content { width: 720px; float: left; background: gray; } #content { width:960px; overflow: hidden; } </style></head><body> <div class="layoutDemo"> <div id="left" class="aside innerPadding border">Left Sidebar</div>; <div id="main-content" class="article innerPadding border">Main Content</div> </div></body></html> ディスカッション (解決策) への返信
これらのクラスのうち (innerPadding ボーダーは別として)、そのうちの 1 つがborder width、padding、marginが0ではない場合、幅の合計は超えます
border、padding、marginはすべて0ですが、まだ問題があります
220+20+720 == 960
それから私は推測しますie6 のボックスモデルは標準化されていないため、 ie6 でテストしています。
別の可能性もあります。あなたのコードはブラウザの混合モードになっています
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0; border: 0; } .layoutDemo { width: 960px; background: #000; } #left { width: 220px; float: left; margin-right: 20px; background: green; border: 0; } #main-content { width: 720px; float: left; background: gray; } #content { width:960px; overflow: hidden; } </style> </head> <body> <div class="layoutDemo"> <div id="left" class="aside innerPadding border">Left Sidebar</div> <div id="main-content" class="article innerPadding border">Main Content</div> </div> </body> </html> 上記のコードは正常です。bccd1037c32f6310501a6e90fb603ea7Left Sidebare299f8a25885ee7e0d3b49ef254196e8; レイヤーの後ろのセミコロンを削除すると、レイヤーの外側に余分なセミコロンが追加されます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。