Wie richtet man Inline-Block-Spalten vertikal aus?

Vertikale Ausrichtung von Inline-Block-Spalten

Wenn Sie display:inline-block zum Erstellen von Spalten verwenden, wird dies deutlich, wenn Inhalte hinzugefügt werden bis zur ersten Spalte, die nachfolgenden Spalten steigen vertikal ab. Dies kann durch die Verwendung der CSS-Eigenschaft „vertikal-align“ behoben werden.

Um dieses Problem zu vermeiden, fügen Sie Vertical-align: top; zur CSS-Deklaration des Containers. Dadurch wird sichergestellt, dass alle Spalten oben vertikal ausgerichtet sind, unabhängig vom Inhalt in jeder Spalte.

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

Alternative Ansätze

Obwohl Inline-Block dazu verwendet werden kann Beim Erstellen von Spalten ist dies aufgrund möglicher Leerraumprobleme zwischen den Spalten möglicherweise nicht die optimale Lösung. Erwägen Sie stattdessen die Verwendung von Flexbox oder CSS-Raster, da diese mehr Kontrolle über das Spaltenlayout und die Ausrichtung bieten.

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