Informationen zum CSS-Floating und zum Aufheben des Floatings
Definition von FloatSetzt das Element aus dem normalen Dokumentfluss heraus und verschiebt das Element näher nach links oder rechts. Die Kante des übergeordneten Elements oder die Kante anderer Elemente, die auf schweben gesetzt sind Probleme schweben lösen 1. Lösen Sie das Problem von Text um Bilder herum Platzieren Sie den Text links neben dem BildWenn Float nicht verwendet wird:
Bei Verwendung von Float:
Verwendete Attribute Verwendetes Attribut: Float, Attributwert: rechts/links Problem des schwebenden Höhenkollapses und Lösung Problem des Höhenkollapses Wenn die für das übergeordnete Element festgelegte Höhe von der für das untergeordnete Element festgelegten Höhe abweicht, tritt ein Problem mit der Höhenreduzierung auf. Beim Einfügen von Text kann dieser nicht an der richtigen Position eingefügt werden und die Höhenreduzierung führt dazu, dass der Titel nicht unter diesem Block angezeigt wird:
Nach dem Lösen von:
Problemumgehung Pseudoelement-Löschfloß:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<style type="text/css">
.Elternteil{
Breite: 400px;
Höhe: 400px;
Rand: 0 automatisch;
Anzeige: Block;
Hintergrund: hellgrau;
}
.parent:nach{
Inhalt: "";
Anzeige: Block;
klar: beides;
}
.Kind{
Anzeige: Inline-Block;
Breite: 200px;
Höhe: 200px;
Hintergrund: hellblau;
schweben: links;
}
</Stil>
</Kopf>
<Text>
<div Klasse="übergeordnet">
<div Klasse="Kind"></div>
<div Klasse="Kind"></div>
<div Klasse="Kind"></div>
</div>
<h1>Dies ist eine Überschrift</h1>
<div></div>
</body>
</html>Dies ist das Ende dieses Artikels über CSS-Floating- und Cancelling-Floating-Effekte. Weitere relevante CSS-Floating- und Cancelling-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF
>>: Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben
Artikel empfehlen
Allgemeine Befehle zum Bereitstellen von InfluxDB und Mongo mit Docker
Bereitstellen einer Datenbank basierend auf Docke...
CSS3-Implementierungscode für den kreisförmigen Fortschritts-Tick-Effekt
Inhaltsverzeichnis 8. Kreisförmiger Fortschritts-...
So zeigen Sie eine PDF-Datei mit pdfjs in vue in der Vorschau an
Inhaltsverzeichnis Vorwort denken Analysieren und...
Detaillierte Einführung in die Linux-Hostnamenkonfiguration
Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...
Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren
Egal, ob Sie zu Hause auf dem Sofa oder draußen i...
So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
Zuerst müssen wir den Selbstaufruf der Funktion k...
CentOS 8-Installationsdiagramm (superdetailliertes Tutorial)
CentOS 8 ist offiziell veröffentlicht! CentOS ent...
JavaScript-Dom-Objektoperationen
Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...
So implementieren Sie eine geplante automatische Sicherung von MySQL unter CentOS7
Das Schönste, was in einer Produktionsumgebung pa...
Gründe, warum MySQL den Abfrage-Cache abgebrochen hat
MySQL hatte zuvor einen Abfragecache, Query Cache...
MySQL-Datenbanktabellendesign mit Baumstruktur
Inhaltsverzeichnis Vorwort 1. Basisdaten 2. Verer...
Eine kurze Diskussion über die Fallstricke und Lösungen der neuen Features von MySQL 8.0 (Zusammenfassung)
1. Benutzer anlegen und autorisieren Das Erstelle...
Lösen Sie das Problem des unzureichenden Docker-Festplattenspeichers
Nachdem der Server, auf dem sich Docker befindet,...
Detaillierter Prozess der Installation von nginx1.9.1 auf centos8
1.17.9 Wirklich leckerer Nginx-Download-Adresse: ...
Lösung für den ineffektiven Rand von in HTML verschachtelten Divs
Hier ist eine Lösung für das Problem, dass der Ra...