DIV について新人に質問する float_html/css_WEB-ITnose

243a8f3f087936dc3f96e2f0cf018c22
fb023a6321138dbcef553164fc089917ss16b28748ea4df4d9c2150843fecfba68
deb2845d5cf6ded3cfabb2dc6ae7561e376aec1aabcd5e6da5eb3db5c63ef51e16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
CSS は次のようになります
#main
{
margin:12px 0px 0px 0px;
幅: 100%;
高さ: 600px;
#main-left
{ width:660px;
float: left;
width:300px;
高さ: 100px;
問題は、なぜ main-right1 が main-left の右側ではなく main-left の下に囲まれ、さらに main DIV をオーバーフローしているのかということです。 。
width:300px;max-height:100px; を削除すると、main-right1 が main-left の右側に配置されます


ディスカッションへの返信 (解決策)
c9ccee2e6ea535a969eb3f532ad9fe89 * {margin:0px ; パディング:0px;}
#main {margin-top:12px;width:100%;height:600px;p}
#main-left {width:660px;height:553px;float:left;}
#main- right1 {width:300px;height:100px;float:left;}
531ac245ce3e4fe3d50054a55f265927

さらに、ブラウザが縮小すると、メイン DIV の幅は 100% になります。 。 。

簡単なデバッグ: 真ん中の赤い部分は空白として使用できます

tiaoshi: デバッグ中に使用され、選択的に削除できます

#main{margin:12px 0px 0px 0px;width:100%;height:600px;}#main-left{ width:660px;  height:553px;  padding:auto;  margin:auto;  background-color:#cccccc;/*tiaoshi*/  float:left;}#blank{ /*tiaoshi*/	width:10px;	height:100px;	float:left;	margin:auto;	background-color:red;/*tiaoshi*/}#main-right1{     width:300px;  height:100px;  padding:auto;  margin:auto;  background-color:blue;/*tiaoshi*/}

<div id="main">  <div id="main-left">ss</div>  <div id="blank">s</div><!--tiaoshi-->  <div id="main-right1">ss</div>    </div>

If div 中に画像がない場合。 、メイン左の右側あたりに配置できます。 。私はこれを知っている。 。

これを試してみます: main-left に display:block を追加します; main-right1 に float:right を追加します。

#main-right1 に float:left を追加するか、2 つの div の幅を減らします。