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
JavaScript zum Erzielen eines einfachen Karusselleffekts
Was ist ein Karussell? Karussell: In einem Modul ...
Beispielcode für den dynamischen CSS-Ladebalkeneffekt
Mit dem Wissen über CSS-Variablen werde ich den C...
jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen
Wir sehen oft, dass Anzeigen nach ein paar Sekund...
JavaScript-Tippspiel
In diesem Artikel wird der spezifische JavaScript...
Detaillierte grafische Erläuterung der Hadoop-Installation und -Konfiguration basierend auf Linux7
Bereiten Sie die Zutaten wie oben gezeigt vor (ps...
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Einkaufswagens (ES6 objektorientiert)
In diesem Artikel wird der spezifische JavaScript...
HTML-strukturierte Implementierungsmethode
DIV+CSS-Struktur Lernen Sie CSS-Layout? Sie beherr...
mysql teilt eine Datenzeile basierend auf Kommas in mehrere Zeilen auf
Inhaltsverzeichnis Trennwirkung Erläuterung der B...
So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS
Eine beträchtliche Anzahl von Websites verwendet d...
Vue3.0 verwendet das Plug-In vue-grid-layout, um Drag-Layout zu implementieren
Inhaltsverzeichnis 1. Plugins 2. Zwischenspiel 3....
Ein Artikel zum Verständnis von Linux-Festplatten und Festplattenpartitionen
Vorwort Alle Hardwaregeräte im Linux-System werde...
Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML
Drei Möglichkeiten zum Festlegen von Rahmen in HT...
Detaillierte Erklärung zweier schneller Möglichkeiten zum Schreiben von console.log in vscode
(I) Methode 1: Vorab direkt im Skript-Tag definie...
Detaillierte Erläuterung der sieben Wertübertragungsmethoden von Vue
1. Vom Vater zum Sohn Definieren Sie das props Fe...
11 Beispiele für die erweiterte Verwendung von Eingabeelementen in Webformularen
1. Löschen Sie das gepunktete Feld, wenn die Scha...