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

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 */
}

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!