div+cssに関する小さな質問です。 _html/css_WEB-ITnose-htmlチュートリアル-php.cn

div+cssに関する小さな質問です。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:44:23

オリジナル

962 人が閲覧しました

CSS

この左側と右側が両方とも #maincontainer div でラップされているのを見てください。
コードは次のとおりです。

   #left        {            background: #eee;            width: 350px;            height: 400px;            float: left;        }        #right        {            background: #ccc;            width: 150px;            height: 400px;            float: right;        }        #maincontainer        {            width: 500px;            overflow: auto;                    }        #foot        {            background: #eee;            width: 500px;            height: 100px;        }

ログイン後にコピー

「なぜここに表示されるのですか？」実行するのに問題はありません。

しかし、なぜデザインページでこの領域を空のままにする必要があるのでしょうか? #maincontainer の高さを設定していません。
国境もありません。なぜその作品が登場するのでしょうか？問題なく動作します。本当に厄介に見えます。
神に助けを求めます。

ディスカッションへの返信 (解決策)

#foot{
clear:both
}
試してみる

*{margin:0;padding:0;}

LZ とはどのブラウザですか?

1階と2階の両方の方法を試すことができます

        #foot        {            clear:both;            background: #eee;            width: 500px;            height: 100px;        }

ログイン後にコピー

IE7、8、9、10とChromeをテストしましたが、この現象はIE7で発生し、解決策を探しています。

<!doctype html><!-- Saved from html5snippet.net --><html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'/><style type='text/css'>body {background:lightblue;}div {margin:0;padding:0;}#left     {         background: #aaa;         width: 35%;         height: 400px;         float: left;     }     #right     {         background: #ccc;         width: 65%;         height: 400px;         float: right;              }                   #maincontainer     {       clear:left;       background: red;         width: 100%;     }       #foot     {                 background: #eee;         width: 100%;         height: 100px;     }</style><script type='text/javascript'></script></head><body>   <div id="left"></div><div id="right"></div><div id="maincontainer"></div><div id="foot"></div></body></html>

ログイン後にコピー

フロートをクリアするには

レイヤーを追加する必要があります~~

<div id="maincontainer"><div id="left"></div><div id="right"></div><div class="clear"></div></div><div id="foot"></div>

ログイン後にコピー

.clear{clear:both;background: none;border: 0;display: block;float: none;font-size:0;margin:0;padding:0;overflow: hidden;visibility: hidden;width:0px;height:0px;line-height:0px;}#left        {            background: #eee;            width: 350px;            height: 400px;            float: left;        }        #right        {            background: #ccc;            width: 150px;            height: 400px;            float: right;        }        #maincontainer        {            width: 500px;            overflow: auto;                     }        #foot        {            background: #eee;            width: 500px;            height: 100px;        }

ログイン後にコピー

レイヤーをクリアフロートにします~~

<div id="maincontainer"><div id="left"></div><div id="right"></div><div class="clear"></div></div><div id="foot"></div>

ログイン後にコピー

.clear{clear:both;background: none;border: 0;display: block;float: none;font-size:0;margin:0;padding:0;overflow: hidden;visibility: hidden;width:0px;height:0px;line-height:0px;} #left        {            background: #eee;            width: 350px;            height: 400px;            float: left;        }        #right        {            background: #ccc;            width: 150px;            height: 400px;            float: right;        }        #maincontainer        {            width: 500px;            overflow: auto;                      }        #foot        {            background: #eee;            width: 500px;            height: 100px;        }

ログイン後にコピー

みんな誤解してます。間違って強調してしまったかもしれません。 VS2008 のデザインページでの状況です。ブラウザは正常に動作します。。。。

div の上下のマージンに問題があるはずです