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

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

Artikel empfehlen

Vollständiger Schrittbericht zur Vue-Kapselung allgemeiner Tabellenkomponenten

Inhaltsverzeichnis Vorwort Warum müssen wir die T...

Detaillierte Erklärung der berechneten Eigenschaften von Vue

1. Was ist ein berechnetes Attribut? Einfach ausg...

Überwachen Sie Änderungen im MySQL-Tabelleninhalt und aktivieren Sie das MySQL-Binärprotokoll

Vorwort binlog ist eine binäre Protokolldatei, di...

So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

Aufgrund der zunehmenden Anzahl von Schaltflächen...

Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS

In diesem Artikelbeispiel wird der spezifische JS...

So verwenden Sie MySQL, um die Datengenerierung in Excel abzuschließen

Excel ist das am häufigsten verwendete Tool zur D...

Zusammenfassung der Lastausgleichsmethoden von Nginx

Um den Lastenausgleich zu verstehen, müssen Sie s...

Erfahren Sie mehr über den Ereignisplaner EVENT in MySQL

Der Ereignisplaner in MySQL, EVENT, wird auch als...

Zusammenfassung mehrerer APIs oder Tipps in HTML5, die Sie nicht verpassen sollten

In früheren Blogbeiträgen habe ich mich auf einige...

Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes

Manche Leute sind vielleicht noch nicht auf dieses...

Konfiguration der Fensterumgebung Mysql 5.7.21 windowx64.zip kostenlose Installationsversion Tutorial detaillierte Erklärung

1. Laden Sie mysql-5.7.21-windowx64.zip von der o...

Einführung in die Verwendung der unbestimmten Eigenschaft des Kontrollkästchens

Wenn wir das Dialogfeld „Ordnereigenschaften“ in W...

Sammlung von MySQL-Fuzzy-Abfrageanweisungen

SQL-Fuzzy-Abfrageanweisung Die allgemeine Fuzzy-A...

So begrenzen Sie die Zugriffshäufigkeit, die Downloadrate und die Anzahl gleichzeitiger Verbindungen in Nginx

1. Übersicht über Module und Anweisungen zur Begr...

Mehrere Methoden zum Löschen von Floating (empfohlen)

1. Fügen Sie ein leeres Element desselben Typs hi...