vertikale Ausrichtung von inline-block-Spalten

Wenn die Anzeige verwendet wird: Inline-Block, um Spalten zu erstellen, wird anscheinend anscheinend, dass in der ersten Spalte die nachfolgende Kolumne verdringlich abgesetzt wird. Dies kann durch die Verwendung der vertikalen CSS-Eigenschaft gelöst werden.

, um dieses Problem zu vermeiden, fügen Sie vertikal-align hinzu: top; zur CSS -Erklärung des Containers. Dies stellt sicher, dass alle Spalten, unabhängig vom Inhalt in jeder Spalte, vertikal übereinstimmen.

.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 verwendet werden kann, um Spalten zu erstellen, ist es möglicherweise nicht die optimale Lösung aufgrund potenzieller White-Space-Probleme zwischen Spalten. Erwägen Sie stattdessen die Verwendung von Flex -Box oder CSS -Raster, da sie mehr Kontrolle über Spaltenlayout und Ausrichtung bieten.