Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie richtet man Inline-Block-Spalten vertikal aus, um ein einheitliches Layout zu erzielen?

Barbara Streisand
Freigeben: 2024-11-05 21:13:02
Original
777 Leute haben es durchsucht

How to Vertically Align Inline-Block Columns for Consistent Layout?

Vertikale Ausrichtung von Inline-Block-Spalten

Bei der Verwendung von Inline-Block zum Erstellen von Spalten ist es wichtig, das Problem der nach unten verschobenen Spalten zu bewältigen mit hinzugefügtem Inhalt in der ersten Spalte. Um dieses Problem zu lösen, müssen wir eine ordnungsgemäße vertikale Ausrichtung sicherstellen.

Die Lösung besteht darin, CSS-Deklarationen hinzuzufügen, um die Spalten oben vertikal auszurichten:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}
Nach dem Login kopieren

Dadurch wird sichergestellt, dass dies auch bei Variationen der Fall ist Inhalt in der ersten Spalte, die anderen Spalten bleiben oben ausgerichtet.

Inline-Block hat zwar seine Nachteile, ist aber dennoch eine effektive Option zum Erstellen einfacher Spalten. Erwägen Sie jedoch die Verwendung von Flexbox oder CSS Grid für erweiterte Spaltenlayouts.

Das obige ist der detaillierte Inhalt vonWie richtet man Inline-Block-Spalten vertikal aus, um ein einheitliches Layout zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage