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
Zusammenfassung der Probleme bei der Installation von MySQL 5.7.19 unter Linux
Als ich MySQL zum ersten Mal auf meiner virtuelle...
So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs
Einführung Wie im vorherigen Artikel erwähnt, gib...
Informationen zum Debuggen von CSS-Cross-Browser-Style-Fehlern
Als Erstes müssen Sie einen guten Browser auswähl...
Erläuterung zum Lastenausgleich und Reverseproxy von Nginx
Inhaltsverzeichnis Lastenausgleich Klassifizierun...
Über IE8-Kompatibilität: Erklärung des X-UA-Compatible-Attributs
Problembeschreibung: Code kopieren Der Code laute...
CSS3 Flexible Box Flex, um ein dreispaltiges Layout zu erreichen
Wie der Titel schon sagt: Die Höhe ist bekannt, d...
Detaillierte Einführung in die Linux-Hostnamenkonfiguration
Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...
Detaillierte Erläuterung von 2 Methoden zum Synchronisieren der Netzwerkzeit im Linux/CentOS-System
Aus Hardwaregründen kann es vorkommen, dass die M...
Details zum Prototypmodus des Javascript-Entwurfsmusters
Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...
Codeblock-Hervorhebung kann kopiert und angezeigt werden js Plugin highlight.js + clipboard.js Integration
Vor allem aus zwei Gründen: 1. Hervorhebung/Zeile...
Die neuesten 36 hochwertigen kostenlosen englischen Schriftarten freigegeben
01. Unendlichkeit Schriftart herunterladen 02. Ban...
Der JavaScript-Artikel zeigt Ihnen, wie Sie mit Webformularen spielen
1. Einleitung Zuvor haben wir die schnelle Entwic...
Web-Standardanwendung: Neugestaltung der Tencent QQ-Homepage
Die Homepage von Tencent QQ wurde neu gestaltet un...
JavaScript zur Implementierung des Countdowns für den SMS-Versand
In diesem Artikel wird der spezifische JavaScript...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Win10
In diesem Artikel werden die Installations- und K...