Implementierung der gleichmäßigen Aufteilung des übergeordneten Containers (perfekte Drittel) in CSS

Implementierung der gleichmäßigen Aufteilung des übergeordneten Containers (perfekte Drittel) in CSS

Die Breite des übergeordneten Containers ist festgelegt. Wie kann erreicht werden, dass die untergeordneten Elemente die Breite des übergeordneten Containers perfekt und gleichmäßig aufteilen?

HTML-Teil des Codes:

Methode 1: Schwebendes Layout + Prozentsatz

(Verschieben Sie die Unterelemente nacheinander nach links und legen Sie den Breitenprozentsatz jedes Unterelements entsprechend der Anzahl der Unterelemente fest.)

Methode 2: Inline-Block + Prozentsatz

Methode 3: Übergeordnetes Element Anzeige:Tabelle + untergeordnetes Element Anzeige:Tabellenzelle

Methode 4: CSS3-Anzeige: Flex; (Flex-Layout)

Methode 5: Grid-System (Bootstrap)

Fügen Sie dem untergeordneten Element das Klassenattribut class=“col-md-3” hinzu

Mit den oben genannten fünf Methoden lässt sich der Container des übergeordneten Elements gleichmäßig in drei gleiche Teile aufteilen. Mit den ersten beiden auf Prozentsätzen basierenden Methoden lässt sich jedoch keine perfekte Aufteilung in drei gleiche Teile erreichen, da der Prozentsatz eine ungenaue Schätzung darstellt und eine gleichmäßige Aufteilung des untergeordneten Elements schwierig ist, wenn es einen Rand hat.

Die letzten drei Methoden sind vorzuziehen

Dies ist das Ende dieses Artikels über die Implementierung der proportionalen CSS-Aufteilung von übergeordneten Containern (perfekte Drittel). Weitere relevante Inhalte zur proportionalen CSS-Aufteilung von übergeordneten Containern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  TypeScript-Dekorator-Definition

>>:  Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild

Artikel empfehlen

Beispiel, wie man einen Div-Hintergrund transparent macht

Es gibt zwei gängige Möglichkeiten, den Div-Hinte...

Beschreibung des MySQL-Optimierungsparameters query_cache_limit

query_cache_limit query_cache_limit gibt die Puff...

Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS

Wenn die Bildlaufleiste nach unten gezogen wird, ...

Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen

Ich habe viele davon gesammelt, aber alle endeten...

Häufig verwendete englische Schriftarten für die Webseitenerstellung

Arial Arial ist eine serifenlose TrueType-Schrifta...

Wie MySQL implizite Standardwerte verarbeitet

Einige Studenten sagten, dass sie auf das Problem...

CSS, um den kleinen scharfen Eckeneffekt von Blasen zu erzielen

Effektbild (die Rahmenfarbe ist zu hell, setzen S...

So implementieren Sie die Fernzugriffskontrolle in Centos 7.4

1. SSH-Remoteverwaltung SSH ist ein sicheres Kana...

MySQL5.6.31 winx64.zip Installations- und Konfigurationstutorial

#1. Herunterladen # #2. Entpacken Sie die Datei l...

MySQL erklärt das Prinzip und Beispiel zum Abrufen von Abfrageanweisungen

„explain“ wird verwendet, um Informationen zum Ab...