4

これがフィドルです。

divsヘッダー用と本体用の2つを持っています。divヘッダー用の の中に、別のものdivがあり、その div はfloated left. そのため、floatingこの 2 つの間に空白が発生していますdivs(ヘッダーの div と本体の div の間)。

#DivLogo[注:フィドルの css セクションを参照してください]

私の質問は、なぜこの種の問題がフローティングのために発生しているのかということです.?

4

5 に答える 5

9

#DivHeader を にすることの成果物ですinline-block。に変更し、フロートを含むようdisplay: blockに設定します。http://jsfiddle.net/jhcUb/overflow: hidden;を参照してください

于 2013-06-18T18:39:16.607 に答える
3

インラインブロックの動作の理由

元の CSS は次のとおりです。

#DivHeader
{
    position:relative;
    display:inline-block;
    width:100%;
    font-family: Century Gothic, sans-serif;
    background-color:#3b5998;
}

には 2 つの子要素があり#DivHeader、1 つは浮動要素で、もう 1 つは絶対配置要素であるため、 の高さには寄与しません#DivHeader。

を設定したと仮定するとdisplay: block、ページの左上隅から赤い背景がペイントされ、ヘッダーは表示されません。

これは、 に設定#DivMainしたposition: relativeために、以前にレンダリングされた要素の上に描画される新しいスタック コンテキストを作成したためです。

に設定position: staticした場合#DivMainは、浮動要素からのヘッダー コンテンツが表示されます。

に戻ると#DivHeader、 を使用するdisplay: inline-blockと、要素は HTML ドキュメント内の空白を認識し、匿名のインライン ボックスを作成します。これは、#DivHeaderコンテンツが含まれていることを意味します。フロートの後に余白があるため、フロートによるクリアランスがインライン ブロックに寄与し、背景色などが表示されます。

問題を修正するのは簡単DivHeaderです。overflow: autodisplay: block

もう 1 つ、 float を使用していなければ#DivLogo問題は発生しません。ロゴ要素のフォント サイズが大きくなると、インライン ブロックによって認識される空白が問題にならないようにベースラインが十分にずれてしまうからです。

ここでかなりのことが起こっています！

于 2013-06-18T19:08:36.300 に答える