怎么解决div覆盖内容却没覆盖的问题?_html/css_WEB-ITnose
一、在上下结构的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>
20: </html>
一般想需要将“.boxa”和“.boxb”布局是上下结构，从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果，但“.boxb”这个DIV跑到“.boxa”下面去了，但内容没有发生覆盖，只有DIV发生覆盖现象。
这 个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动，所以导致“.boxa”没有被撑开，而同级的“.boxb”盒子与 “.boxa”紧贴，而“.boxa”高度没有，“.boxa”的子级浮动的与“.boxb”不是同级，“.boxb”盒子依然认为“.boxa”没有高 度，所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象。
问题解决办法，测试有三种：
1、给boxa添加一个height属性，height的值必须大于或等于baxa-l的高度
1: <div class="boxa" style="height:81px;">
2、清除浮动
在“.boxa”盒子
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>
9: </div>
或者在boxb上清除浮动
1: <div class="boxb" style="clear:both">boxb盒子里的内容</div>
3、对“.boxa”添加overflow:hidden
1: <div class="boxa" style="overflow:hidden">
2: <div class="boxa-l">内容左</div>
3: <div class="boxa-r">内容右</div>
4: </div>
二、相邻两个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: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;} 8: .cc{ border:1px solid #F00;background:#CCC; height:80px}9: </style>
10: </head>
11: <body>
12: <div class="bb">我是bb里内容</div>
13: <div class="cc">我是dd里内容</div>
14: </body>
15: </html>
从 上图或浏览器测试案例可以看出，“.bb”对应DIV盒子浮动覆盖在“.cc”对应DIV盒子之上，但内容没有覆盖，这是因为“.bb”对应DIV盒子使 用了浮动，而同级“.cc”对应DIV盒子没有使用浮动，一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成 覆盖现象。
解决方法：
1、都不使用浮动，去掉.bb中的float，效果如下
2、都使用浮动，给.cc添加float:left,效果如下
3、对没有使用float浮动的DIV设置margin样式。给.cc添加margin:100px,效果如下
来源：http://www.ido321.com/669.html
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Lösung für das Problem, dass das chinesische Sprachpaket nicht auf einem Win11-System installiert werden kann
Mar 09, 2024 am 09:48 AM
Lösung für das Problem, dass das Win11-System das chinesische Sprachpaket nicht installieren kann. Mit der Einführung des Windows 11-Systems begannen viele Benutzer, ihr Betriebssystem zu aktualisieren, um neue Funktionen und Schnittstellen zu nutzen. Einige Benutzer stellten jedoch fest, dass sie das chinesische Sprachpaket nach dem Upgrade nicht installieren konnten, was ihre Erfahrung beeinträchtigte. In diesem Artikel besprechen wir die Gründe, warum das Win11-System das chinesische Sprachpaket nicht installieren kann, und stellen einige Lösungen bereit, die Benutzern bei der Lösung dieses Problems helfen. Ursachenanalyse Lassen Sie uns zunächst die Unfähigkeit des Win11-Systems analysieren
Fünf Tipps, die Ihnen zeigen, wie Sie das Problem lösen können, dass sich das Black Shark-Telefon nicht einschaltet!
Mar 24, 2024 pm 12:27 PM
Da sich die Smartphone-Technologie ständig weiterentwickelt, spielen Mobiltelefone eine immer wichtigere Rolle in unserem täglichen Leben. Als Flaggschiff-Telefon mit Schwerpunkt auf Spieleleistung erfreut sich das Black Shark-Telefon bei Spielern großer Beliebtheit. Manchmal sind wir jedoch auch mit der Situation konfrontiert, dass das Black Shark-Telefon nicht eingeschaltet werden kann. Zu diesem Zeitpunkt müssen wir einige Maßnahmen ergreifen, um dieses Problem zu lösen. Als Nächstes geben wir Ihnen fünf Tipps, wie Sie das Problem lösen können, dass sich das Black Shark-Telefon nicht einschaltet: Schritt 1: Überprüfen Sie zunächst die Akkuleistung. Stellen Sie zunächst sicher, dass Ihr Black Shark-Telefon über genügend Strom verfügt. Möglicherweise ist der Akku des Telefons leer
Der Treiber kann auf diesem Gerät nicht geladen werden. (Persönlich getestet und gültig)
Mar 14, 2024 pm 09:00 PM
Jeder weiß, dass das Gerät möglicherweise nicht richtig funktioniert oder nicht richtig mit dem Computer interagiert, wenn der Computer den Treiber nicht laden kann. Wie lösen wir also das Problem, wenn auf dem Computer eine Meldung angezeigt wird, dass der Treiber auf diesem Gerät nicht geladen werden kann? Der unten stehende Editor zeigt Ihnen zwei Möglichkeiten, wie Sie das Problem einfach lösen können. Der Treiber kann auf diesem Gerät nicht geladen werden. Lösung 1. Suchen Sie im Startmenü nach „Kernel Isolation“. 2. Deaktivieren Sie die Speicherintegrität. Die Meldung oben lautet: „Die Speicherintegrität wurde deaktiviert. Ihr Gerät ist möglicherweise anfällig.“ Klicken Sie einfach darauf und ignorieren Sie es. 3. Das Problem kann nach einem Neustart der Maschine behoben werden.
Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? Wo ist das beim Posten automatisch gespeicherte Bild?
Mar 22, 2024 am 08:06 AM
Durch die kontinuierliche Entwicklung der sozialen Medien ist Xiaohongshu zu einer Plattform für immer mehr junge Menschen geworden, auf der sie ihr Leben teilen und schöne Dinge entdecken können. Viele Benutzer haben beim Posten von Bildern Probleme mit der automatischen Speicherung. Wie kann man dieses Problem lösen? 1. Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? 1. Cache leeren Zuerst können wir versuchen, die Cache-Daten von Xiaohongshu zu löschen. Die Schritte sind wie folgt: (1) Öffnen Sie Xiaohongshu und klicken Sie auf die Schaltfläche „Mein“ in der unteren rechten Ecke. (2) Suchen Sie auf der persönlichen Center-Seite nach „Einstellungen“ und klicken Sie darauf. (3) Scrollen Sie nach unten und suchen Sie nach „; Option „Cache löschen“. Klicken Sie auf „OK“. Nachdem Sie den Cache geleert haben, geben Sie Xiaohongshu erneut ein und versuchen Sie, Bilder zu posten, um zu sehen, ob das Problem mit dem automatischen Speichern behoben ist. 2. Aktualisieren Sie die Xiaohongshu-Version, um sicherzustellen, dass Ihr Xiaohongshu
So lösen Sie das Problem, dass das Standard-Gateway automatisch verschwindet
Feb 24, 2024 pm 04:18 PM
So lösen Sie das Problem, dass das Standard-Gateway automatisch verschwindet. In der modernen Gesellschaft ist das Internet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Ob bei der Arbeit oder zur Unterhaltung, wir alle benötigen stabile Netzwerkverbindungen, um verschiedene Aufgaben zu erledigen. Das Standard-Gateway ist eines der Schlüsselelemente, die das lokale Netzwerk mit dem externen Internet verbinden. Allerdings kann es manchmal vorkommen, dass das Standard-Gateway automatisch verschwindet, was dazu führt, dass kein Zugriff auf das Internet mehr möglich ist. Wie sollen wir also dieses Problem lösen, wenn das Standard-Gateway verschwindet? Zunächst sollten wir das Konzept des Standard-Gateways klären. Das Standard-Gateway ist eine Netzwerkroute
So lösen Sie das Problem, dass der Huawei-Browser nicht mehr auf diese Webseite zugreift
Feb 26, 2024 pm 01:28 PM
Wie kann das Problem gelöst werden, dass der Huawei-Browser nicht mehr auf diese Webseite zugreift? Wenn Sie mit dem mobilen Browser von Huawei auf bestimmte Websites zugreifen, wird möglicherweise eine Meldung mit dem Hinweis angezeigt, dass der Zugriff verboten ist, wodurch Benutzer daran gehindert werden, verwandte Inhalte normal zu durchsuchen. Dies ist für Benutzer sehr unpraktisch. Was sollten wir also tun, wenn wir auf eine Situation stoßen, in der der Zugriff auf die Website des Huawei-Mobilbrowsers verboten ist? Der folgende Editor bietet Ihnen Lösungen für das Problem, den Zugriff auf die Huawei-Browser-Website zu verbieten. Ich hoffe, dass er Ihnen hilfreich sein wird. Lösung für das Verbot des Zugriffs auf die Huawei-Browser-Website 1. Klicken Sie nach dem Öffnen des Huawei-Mobilbrowsers unten auf das Dreipunktsymbol und dann auf Einstellungen. 2. Nachdem Sie die Einstellungen eingegeben haben, klicken Sie auf [Sicherheit und Datenschutz] 3. Schalten Sie den Schalter auf der rechten Seite von [Sicheres Surfen] aus, um die Zugriffsbeschränkungen für die Website aufzuheben. Das Obige ist die Lösung für das Verbot des Zugriffs auf Huawei-Browser-Websites.
So ändern Sie den Microsoft Edge-Browser so, dass er mit 360-Navigation geöffnet wird - So ändern Sie die Öffnung mit 360-Navigation
Mar 04, 2024 pm 01:50 PM
Wie ändere ich die Seite, die den Microsoft Edge-Browser öffnet, auf 360-Navigation? Es ist eigentlich sehr einfach, deshalb werde ich Ihnen jetzt die Methode vorstellen, die Seite zu ändern, die den Microsoft Edge-Browser auf 360-Navigation öffnet Schau mal. Ich hoffe, ich kann allen helfen. Öffnen Sie den Microsoft Edge-Browser. Wir sehen eine Seite wie die folgende. Klicken Sie auf das Dreipunktsymbol in der oberen rechten Ecke. Klicken Sie auf „Einstellungen“. Klicken Sie in der linken Spalte der Einstellungsseite auf „Beim Start“. Klicken Sie auf die drei im Bild in der rechten Spalte angezeigten Punkte (klicken Sie nicht auf „Neuen Tab öffnen“), klicken Sie dann auf Bearbeiten und ändern Sie die URL in „0“ (oder andere bedeutungslose Zahlen). Klicken Sie anschließend auf „Speichern“. Wählen Sie als Nächstes „
Interpretation des Oracle-Fehlers 3114: Ursachen und Lösungen
Mar 08, 2024 pm 03:42 PM
Titel: Analyse des Oracle-Fehlers 3114: Ursachen und Lösungen Bei der Verwendung einer Oracle-Datenbank stoßen Sie häufig auf verschiedene Fehlercodes, unter denen Fehler 3114 am häufigsten vorkommt. Bei diesem Fehler handelt es sich im Allgemeinen um Datenbankverbindungsprobleme, die beim Zugriff auf die Datenbank zu Ausnahmen führen können. In diesem Artikel wird der Oracle-Fehler 3114 interpretiert, seine Ursachen erläutert und spezifische Methoden zur Behebung des Fehlers sowie zugehörige Codebeispiele vorgestellt. 1. Definition von Fehler 3114 Oracle-Fehler 3114 bestanden
