Lösung für die Lücke zwischen Divs

Wenn Sie HTML-Div-Blöcke verwenden und die Mitte der Blöcke nicht fest verbunden werden kann und Sie das Problem nicht lösen können

1. Sie können im mittleren Inhalt einen <head></head> hinzufügen

* {
Rand: 0;
Polsterung: 0;
}

Setzen Sie den Abstand zwischen allen Blöcken auf Null, ohne mit dem darunter liegenden Abstand in Konflikt zu geraten.

2. Es gibt ein Problem mit dem Abstand zwischen den oberen und unteren Divs

Ich habe 4 Divs geschrieben, nach oben und unten verteilt, mit Abstand zwischen ihnen. Der Code und die Wirkung sind wie folgt:

.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
}
<Text>
<div Klasse="div1" ></div>
<div Klasse="div2"></div>
<div Klasse="div3"></div>
<div Klasse="div4"></div>
</body>

Dann habe ich versucht, jedem Div margin:0 hinzuzufügen, um den Abstand zwischen den Divs zu entfernen. Der Code lautet wie folgt:

.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
Rand: 0;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
Rand: 0;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
Rand: 0;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
Rand: 0;
}

Das Ergebnis bleibt das gleiche, es besteht jedoch immer noch eine Lücke, wie unten gezeigt:

Als nächstes suchte ich in Baidu nach einer Methode zum Einstellen der Schriftgröße. Der Code und die Wirkung sind wie folgt:

Textkörper{Schriftgröße:0;}
.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
}

Der obige Code konzentriert sich auf das Hinzufügen von body{font-size:0;} und hat folgende Auswirkung:

Sie können sehen, dass die Lücke zwischen der Ober- und Unterseite des Divs geschlossen wurde. Oben und links ist jedoch immer noch eine Lücke vorhanden.

Dazu habe ich Folgendes gemacht und body{margin:0px;} hinzugefügt. Der Code lautet wie folgt:

Körper {margin:0px;}
Textkörper{Schriftgröße:0;}
.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
}

Die Wirkung ist wie folgt:

Wie Sie sehen, wurden sämtliche Abstände entfernt.

Es besteht jedoch weiterhin ein Problem: Wenn Sie font-size:0; festlegen, werden alle Schriftarten gelöscht.

So habe ich es gelöst: Fügen Sie ein Div innerhalb eines Div hinzu und setzen Sie die Schriftgröße des inneren Divs zurück, zum Beispiel: font-size: 30px;.

Perfekte Lösung!

3. Nachdem DIV+CSS clear:both das Floating gelöscht hat, entsteht über dem Div eine Lücke

Wir wissen, dass die Verwendung von CSS-Float manchmal CSS-Float erzeugt. Zu diesem Zeitpunkt müssen wir den Float bereinigen. Dazu können wir das Stilattribut „clear“ verwenden.

Allerdings erscheint nach der Verwendung von „clear:both“ zum Löschen des resultierenden Floats häufig eine weiße Lücke über dem Div, auf das „clear:both“ angewendet wird.

Die Lösung besteht darin, dem Div über diesem Div overflow:hidden hinzuzufügen.

<div Klasse="a versteckt">
<div class="bms_2_1_1 fl">~Ich habe den Ozean überquert, um dich zu sehen,</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">Peking</div>

Stilbeschreibung:

.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}

Dies ist die Lösung für die Div-Lücke, die in den letzten Tagen durch Clear:Both verursacht wurde.

Warum clear:both in div verwenden? Dies liegt hauptsächlich daran, dass der Text in Div B nicht linksbündig ausgerichtet werden kann, selbst wenn in CSS text-align:left festgelegt ist. Daher wird in diesem Fall clear:both verwendet.

Ein paar Fragen:
(1) Warum ist text-align:left; in einem div ungültig?
(2) Warum kann clear:both das Problem lösen, wenn text-align:left; wirkungslos ist?
(3) Warum entstehen bei der Verwendung von clear:both Lücken?
(4) Warum löst die Verwendung von overflow:hidden; im Div der gleichen Ebene darüber das unten aufgeführte Lückenproblem?

Ich werde in Zukunft Gelegenheit haben, die oben genannten Themen im Detail zu studieren.

Zusammenfassen:

Wenn „clear:both“ auf ein Div angewendet wird, um eine Lücke zu erstellen, muss „overflow:hidden;“ zum Div der gleichen Ebene darüber hinzugefügt werden, um die Lücke zu schließen.

<<:

>>: So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems

Lösung für die Lücke zwischen Divs

Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems

So gehen Sie nach der MySQL-Tabellenpartitionierung problemlos online

Was ist Tabellenpartitionierung und -partitionierung?MySql-Datenbankpartitionierung und Tabellenpartitionierungsmethode

Fallstricke bei der Installation der komprimierten Version von MySQL 5.7.17 unter Windows

HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste

Erste Schritte mit Mysql - SQL-Ausführungsprozess

So starten Sie ein Vue-Projekt mit dem M1 Pro-Chip

Detaillierter Prozess der Vue-Front-End-Verpackung

Praxis und Analyse der geschichteten Verpackung von Docker-Images für Spring Boot (empfohlen)

Tutorial zur Installation der dekomprimierten Version von mysql-8.0.15-winx64 und drei Möglichkeiten zum Beenden

Artikel empfehlen

js, um einen einfachen Lupeneffekt zu erzielen

Centos7-Startvorgang und Nginx-Startkonfiguration in Systemd

Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren

Methoden und Schritte zum Bereitstellen von Go-Projekten basierend auf Docker-Images

Lösen Sie das Problem, dass Navicat keine Verbindung zu MySQL auf dem Linux-Server herstellen kann

So importieren und exportieren Sie Cookies und Favoriten in FireFox

MySql Installer 8.0.18 Visuelles Installationstutorial mit Bildern und Text

So erreichen Sie eine nahtlose Token-Aktualisierung

Zen-Codierung für Editplus – Beispielcodebeschreibung

Tutorial zur Remote-Verbindung mit einer MySQL-Datenbank unter Linux

Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen

Detailliertes Tutorial zur Installation der virtuellen Python 3-Umgebung in Ubuntu 20.04

Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers

Detaillierte Erklärung zur Verwendung von Docker durch Deepin zur Installation einer MySQL-Datenbank

Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?