ホームページ > 記事 > ウェブフロントエンド > HTML 内で DIV が重なっている場合の対処方法

HTML 内で DIV が重なっている場合の対処方法

php中世界最好的语言オリジナル: 2017-11-23 18:12:0921244ブラウズ

Web ページを作成するときに、DIV が重なってコンテンツが表示されないという問題がよく発生します。そこで、今日はその原因と解決策を紹介します。

おそらく、下位の DIV のコンテンツが上位の DIV のコンテンツと重なって、DIV とDIV が重なっている 2 つの隣接する DIV ボックスが重なって覆われている場合、これらの問題とその解決方法は何でしょうか。

次に、ケースを使用して、これら 2 つのタイプの互換性の間で DIV カバレッジが重複する問題を示し、その理由と解決策を説明します。

上下構造の DIV ボックスカバレッジまず、サンプル HTML コードを使用します

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

コードをコピーして、DIV カバレッジ現象を自分で発見できます。

コードの説明例:

CSS 名がそれぞれ「.boxa」と「.boxb」の 2 つの大きな div ボックスを設定します。幅を同じ 400 ピクセルに設定し、「」に高さ 40 ピクセルの黒い境界線を設定します。 .boxb" 黒です。次に、boxa に小さなボックスを 2 つ追加します。左側に 1 つ、右側に 1 つです。CSS 名は、「.boxa-l」と「.boxa-r」です。同時に、赤い枠線、CSS の高さは 80 ピクセル、幅はそれぞれ 280 ピクセルと 100 ピクセルです。

問題分析

一般に、「.boxa」と「.boxb」をトップダウン構造でレイアウトする必要があります。上の図から、ブラウザーで見られる効果は 2 つのコンテンツであることがわかります。ボックスはトップダウン構造の効果を実現しますが、「. DIV「boxb」は「.boxa」の下に入りましたが、内容は上書きされず、DIV のみが上書きされました。

この理由は、最初の大きなボックスの子がfloat属性を使用してfloatしているため、「.boxa」が開かれておらず、同じレベルの「.boxb」ボックスが「.boxa」と厳密に異なるためです。接続されていますが、「.boxa」には高さがありません。「.boxa」の子はフローティングであり、「.boxb」と同じレベルにありません。「.boxb」ボックスは依然として「.boxa」に高さがないと考えます。 so ".boxb" "DIV ボックスは、".boxa" サブレベル DIV ボックスの下で実行され、重複現象が形成されました。

問題の解決策

フロートをクリア

するか、「.boxa」の高さを設定します。通常、テキストの内容が不確かな場合、テキストの内容を固定の高さに設定することはできないため、通常は「.boxa」を使用します。高さは設定できません（もちろん、コンテンツの高さを決定することはできます。この場合、「.boxa」はカバレッジの問題を解決するために高さを設定できます）。ここでは、CSSのclear floatメソッドを使用して、上位構造と下位構造のDIVの重複カバレッジの問題を解決します。floatをクリアするには2つの方法があります。方法は次のとおりです。

css clear はフロートをクリアします

「.boxa」ボックス 16b28748ea4df4d9c2150843fecfba68 を閉じる前に、クリアスタイルを追加してフロートをクリアします。

完全なHTMLソースコード:

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
.clear{ clear:both} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
<div class="clear"></div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

この方法は、前の方法よりも単純で単純です。

overflow

:hiddenを「.boxa」(フローティング子を持つ親ボックス)に追加するだけです。CSS DIVサンプルコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa{ overflow:hidden} 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

DIV カバレッジの問題は誰にとっても解決されます。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。