すみません、CSSレイアウトの幅の合計が親フレームを超えていないのに、位置がずれるのはなぜですか? _html/css

すみません、CSSレイアウトの幅の合計が親フレームを超えていないのに、位置がずれるのはなぜですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:43:19

オリジナル

1207 人が閲覧しました

この投稿の最終編集者は corn8888 で、2013-05-10 21:35:51 です

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

ログイン後にコピー

上記のコードは正常です。

Left Sidebar< を変更してください。 div>; レイヤーの後ろのセミコロンを削除すると、レイヤーの外側に余分なセミコロンが追加されます