Heim > Artikel > Web-Frontend > Was tun, wenn sich DIVs in HTML überlappen?
Was tun, wenn sich DIVs in HTML überlappen?
- php中世界最好的语言Original
- 2017-11-23 18:12:0921311Durchsuche
Bei der Erstellung von Webseiten stellen wir häufig ein Problem fest, das heißt, DIV überdeckt DIV, sodass das Problem besteht, dass sich die DIV-Boxen überlappen und der Inhalt nicht angezeigt wird. Deshalb stellen wir Ihnen heute die Gründe und die Lösung vor.
Vielleicht sind Sie auf ein Layout mit einer Top-Down-Struktur gestoßen. Der Inhalt des unteren DIV überlappt den Inhalt des oberen DIV. Es ist auch möglich, dass der Inhalt darunter das Layout des oberen abdeckt DIV, was zu einer Überlappung von DIV und DIV führt. Möglicherweise habe ich auch eine überlappende Abdeckung zweier benachbarter DIV-Boxen festgestellt. Was ist das Problem und wie kann es gelöst werden?
Als nächstes werden wir anhand eines Falles das Überlappungsphänomen dieser beiden kompatiblen DIV-Overlays demonstrieren und die Gründe und Lösungen erläutern.
Obere und untere Struktur der DIV-Box-Abdeckung. Verwenden Sie zunächst den Beispiel-HTML-Code.
<!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>Sie können den Code kopieren und das Phänomen der DIV-Abdeckung selbst entdecken.
Beispielcodebeschreibung:
Legen Sie zwei große Div-Boxen mit den CSS-Namen „.boxa“ und „.boxb“ fest, legen Sie die Breite auf die gleichen 400 Pixel fest und legen Sie eine für „.boxb“ fest „Ein schwarzer Rand mit einer Höhe von 40 Pixeln und einem schwarzen Hintergrund. Fügen Sie dann zwei kleine Boxen in boxa hinzu, eines links und eines rechts. Die CSS-Namen sind „.boxa-l“ und „.boxa-r“, und die rote Farbe wird gleichzeitig festgelegt. Der Rand und die CSS-Höhe betragen 80 Pixel und die Breite beträgt 280 Pixel bzw. 100 Pixel.
Problemanalyse
Im Allgemeinen ist es notwendig, „.boxa“ und „.boxb“ in einer Top-Down-Struktur anzuordnen. Aus dem Bild oben stellen wir fest, dass der im Der Browser besteht darin, dass der Inhalt der beiden Boxen so ist: Der Struktureffekt von oben nach unten wird erreicht, aber das DIV „.boxb“ geht unter „.boxa“, aber der Inhalt wird nicht überschrieben, sondern nur das DIV.
Dieser Grund liegt darin, dass das untergeordnete Element in der ersten großen Box das Floating-Float-Attribut zum Floaten verwendet, sodass „.boxa“ nicht geöffnet wird und die gleiche Ebene wie die „.boxb“-Box ist ist eng mit „.boxa“ verbunden, aber „.boxa“ hat keine Höhe. Die schwebenden untergeordneten Elemente von „.boxa“ liegen nicht auf derselben Ebene wie „.boxb“. Es gibt keine Höhe, daher verläuft die DIV-Box „.boxb“ unter der DIV-Box der Unterebene „.boxa“ und bildet ein überlappendes Phänomen.
Lösung des Problems
Entweder das Float löschen oder die „.boxa“-Höhe festlegen. Im Allgemeinen können Sie keine feste Höhe festlegen, wenn der Textinhalt unsicher ist , also im Allgemeinen Die Höhe von „.boxa“ kann nicht festgelegt werden (natürlich können Sie bestimmen, wie hoch der Inhalt ist. In diesem Fall kann „.boxa“ eine Höhe festlegen, um das Abdeckungsproblem zu lösen.).
Hier verwenden wir die CSS-Clear-Float-Methode, um das Problem überlappender DIVs in der oberen und unteren Struktur zu lösen. Es gibt zwei Möglichkeiten, Float zu löschen.
css clear löscht den Float
Fügen Sie einen Clear-Stil hinzu, bevor Sie das Feld „.boxa“ schließen16b28748ea4df4d9c2150843fecfba68
Vollständiger HTML-Quellcode:
<!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>Diese Methode ist einfacher und einfacher als die vorherige Methode. Fügen Sie einfach Überlauf:hidden)Der CSS-DIV-Beispielcode lautet wie folgt:
Damit ist das Problem der DIV-Abdeckung für alle gelöst. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!<!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>Verwandte Lektüre:
So verwenden Sie den Randradius in CSSHTML-TabellenstilHTML-BearbeitungskonverterDas obige ist der detaillierte Inhalt vonWas tun, wenn sich DIVs in HTML überlappen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!