ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS 3 つの DIV が 1 つの DIV_html/css_WEB-ITnose にネストされています

DIV+CSS 3 つの DIV が 1 つの DIV_html/css_WEB-ITnose にネストされています

WBOY
WBOYオリジナル
2016-06-24 12:13:511873ブラウズ

     #n { width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;}     #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;}     #n2 { width:470px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;}      #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;}     #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; }


        <div id ="n">            <div id="n1"></div>            <div id="n2"></div>            <div id="n3"></div>        </div>        <div id = "f">        </div>


div(n1,n2,n3) が div(n) と重ならない理由、div(n1,n2,n3) の上に隙間がある理由、隙間を削除する方法。
レンダリング:


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

画像が完全に表示されません
右クリックして新しいタブで画像を開きます
または次のリンクにアクセスしてください:

http://img.my csdn.net/uploads/201207/23/1343050098_5932.jpg

作者がどのブラウザを使用しているかわかりません。 float がクリアされないことを除いて、例外はありません。
うわー

作者がどのブラウザを使っているのか分かりません。 float がクリアされないことを除いて、例外はありません。
HTML コード

92cfafb4c5950129506c673c8a5bc6f0どれを指しているのでしょうか? .clearfix:after { content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1 %;}
.clearfix{display:inline-block;}
/* IE Mac から非表示にする */
.clearfix {display:block;}

まだ同じ

360 Speed Browser バージョン番号: 5.3.0.922
IE8
2つのブラウザ 全部試してみました

フロートがクリアされない以外は例外なし


不思議です、IE6、7、8、Firefox、Google、Open、AppleのSafariを使っていますが、表示は正常です。

奇妙なことに、IE6、7、8、Firefox、Google、Open、Apple の Safari では、投稿者が述べたような状況が見られません。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。