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

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 21, 2016 am 09:44 AM

CSS

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

1	#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階の両方の方法を試すことができます

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

ログイン後にコピー

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

<!doctype html><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 class="clear"></div> レイヤーを追加する必要があります~~

1	`<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 class=" を追加する必要がありますclear"> ;</div> レイヤーをクリアフロートにします~~

1	`<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 までご連絡ください。