ホームページ > 記事 > ウェブフロントエンド > div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css_WEB-ITnose
div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:57:241809ブラウズ
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 の高さ以上でなければなりません
20: </html>
2 . フロートをクリアします
".boxa" ボックス 16b28748ea4df4d9c2150843fecfba68 を閉じる前にクリア スタイルを追加します。
1: <div class="boxa" style="height:81px;">
1: //css
2: .clear{ clear:both} 3:
4: //修改boxa
5: <div class="boxa">
6: <div class="boxa-l">内容左</div>
7: <div class="boxa-r">内容右</div>
8: <div class="clear"></div>
または、boxb の float をクリアします
9: </div>
3. 「.boxa」に overflow:hidden を追加します。
RREE RREE RREE RREE
2. 2 つの隣接する DIV の重複カバレッジ
この問題は通常、2 つの隣接する DIV の一方がフローティングを使用し、もう一方がフローティングを使用しないという事実によって発生し、これにより 2 つの DIV が重複します。
1: <div class="boxb" style="clear:both">boxb盒子里的内容</div>
1: <div class="boxa" style="overflow:hidden">
2: <div class="boxa-l">内容左</div>
3: <div class="boxa-r">内容右</div>
4: </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: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;} 8: .cc{ border:1px solid #F00;background:#CCC; height:80px} 解決策:
1. float を使用せず、.bb 内の float を削除します。効果は次のとおりです