div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css

div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:57:24

オリジナル

1894 人が閲覧しました

1. トップダウン構造の div レイアウトでは、div が div をカバーする可能性がありますが、コンテンツはカバーされません。例を見てみましょう

   1: <!DOCTYPE html>

ログイン後にコピー

   2: <html>

ログイン後にコピー

   3: <head>

ログイン後にコピー

   4: <title>DIV与DIV覆盖</title>

ログイン後にコピー

   5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

ログイン後にコピー

   6: <style>

ログイン後にコピー

   7: .boxa,.boxb{ margin:0 auto; width:400px;}

ログイン後にコピー

   8: .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}

ログイン後にコピー

   9: .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}

ログイン後にコピー

  10: .boxb{ border:1px solid #000; height:40px; background:#999}

ログイン後にコピー

  11: </style>

ログイン後にコピー

  12: </head>

ログイン後にコピー

  13: <body>

ログイン後にコピー

  14: <div class="boxa">

ログイン後にコピー

  15: <div class="boxa-l">内容左</div>

ログイン後にコピー

  16: <div class="boxa-r">内容右</div>

ログイン後にコピー

  17: </div>

ログイン後にコピー

  18: <div class="boxb">boxb盒子里的内容</div>

ログイン後にコピー

  19: </body>

ログイン後にコピー

通常、「.boxa」と「.boxb」をレイアウトする必要があります上の図から、ブラウザーで見られる効果は、2 つのボックス内のコンテンツがトップダウン構造の効果を実現していますが、DIV ".boxb" は ".boxa" の下で実行されていることがわかります。、ただし、コンテンツは上書きされず、DIV のカバレッジ現象のみが発生します。

この理由は、最初の大きなボックス内の子が float 属性を使用して float しているため、「.boxa」が開かれておらず、同じレベルにある「.boxb」ボックスが「.boxa」とは異なるためです。しかし、「.boxa」には高さがありません。「.boxa」の子は浮動小数点であり、「.boxb」ボックスは依然として「.boxa」に高さがないと考えます。 .boxb" DIV ボックスは、".boxa" サブレベル DIV ボックスの下で動作し、重複現象を形成します。

この問題を解決するには 3 つの方法があります:

1. height 属性を boxa に追加します。 height の値は、baxa-l の高さ以上でなければなりません