Zwei Möglichkeiten zur Implementierung von Square Div mit CSS
|
Ziel: Erstelle ein Quadrat, dessen Seitenlänge gleich ist Methode 1: Verwenden Sie die Einheit vw (P.S.: Ich denke, das ist die einfachste Methode). Die HTML-Struktur ist ebenfalls sehr einfach, mit nur einem div
<html>
<Text>
<div Klasse="Quadrat">
</div>
</body>
</html>
.Quadrat{
Breite: 50vw;
Höhe: 50vw;
Hintergrund: blau;
}Methode 2: Verwenden Sie padding-bottom Wichtige Punkte: 1. Höhe: 0, der Inhalt läuft in die Polsterung über, keine Sorge ~~ 2. Wenn der Padding-Bottom-Wert als Prozentsatz festgelegt wird, ist er relativ zur Breite des umgebenden Blocks. 3. Sie müssen den umschließenden Block festlegen HTML-Struktur:
<html>
<Text>
<div Klasse="Container">
<div Klasse="Quadrat">
</div>
</div>
</body>
</html>CSS:
*{
Rand: 0;
}
/* So einstellen, dass der sichtbare Bereich der Seite ausgefüllt wird*/
.Container{
Höhe: 100vh;
Breite: 100vw;
Hintergrund: blasses Goldrutenrot;
}
.Quadrat{
Breite: 50 %; /* relativ zur Breite des Containers */
padding-bottom: 50%; /* relativ zur Containerbreite */
Hintergrund: blassgrün;
} Das war's, zwei reichen. Sie können auch Margin verwenden, aber es besteht die Gefahr eines Zusammenbruchs, also reichen diese beiden ~~ Zusammenfassen Oben sind zwei Methoden, die ich Ihnen vorgestellt habe, um mit CSS quadratische Divs zu realisieren. Ich hoffe, sie werden Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten! |
<<: Anleitung zur Vermeidung von Docker Win Ping-Fehlern bei Containern
>>: Tipps zur Verwendung kleiner HTML-Tags
Artikel empfehlen
So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz
Öffnen Sie den Editor für geplante Aufgaben. Cent...
CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen
Zuerst müssen wir das Attribut „transform-origin“...
Eine detaillierte Einführung zum Einrichten von Jenkins auf Tencent Cloud Server
Inhaltsverzeichnis 1. Verbindung zum Tencent Clou...
Detaillierter Prozess der Vue-Front-End-Verpackung
Inhaltsverzeichnis 1. Verpackungsbefehl hinzufüge...
Detaillierte Erläuterung der bidirektionalen Bindung von Vue
Inhaltsverzeichnis 1. Zwei-Wege-Bindung 2. Wird d...
Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML
Beim Entwerfen einer Seite müssen wir das DIV häu...
Detaillierte Erklärung des Beispiels von Connect auf der Socket (TCP)-Clientseite aus dem Linux-Quellcode
Vorwort Der Autor war schon immer der Meinung, da...
Detaillierte Erklärung der wechselseitigen Verwendung von Ref in React
Inhaltsverzeichnis 1. Lassen Sie uns zunächst erk...
Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung
In diesem Artikelbeispiel wird der spezifische Co...
Schritte zum Erstellen eines WEBSERVERS mit NODE.JS
Inhaltsverzeichnis Was ist nodejs Installieren Si...
Implementierung der DOM-Operation in React
Inhaltsverzeichnis Vorherige Wörter Anwendungssze...
JavaScript implementiert eine Warteschlange mit doppeltem Ende
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie Docker, um ein verteiltes lnmp-Image zu erstellen
Inhaltsverzeichnis 1. Verteilte LNMP-Image-Produk...
Detaillierte Erläuterung des Index und der Speicherstruktur der MySQL InnoDB-Engine
Vorwort In Datenbanken wie Oracle und SQL Server ...
Linux: Fünf-Schritte-Kernel-Build-Baum
Inhaltsverzeichnis 0. Der mit dem System geliefer...