ホームページ >ウェブフロントエンド >htmlチュートリアル >div+cssに関する小さな質問です。 _html/css_WEB-ITnose
div+cssに関する小さな質問です。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:44:23985ブラウズ
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> フロートをクリアするには 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68 レイヤーを追加する必要があります~~
<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 の上下のマージンに問題があるはずです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。