How to Align Inline-Block Columns Vertically?

Vertical Alignment of Inline-Block Columns

When using display:inline-block to create columns, it becomes apparent that when content is added to the first column, the subsequent columns descend vertically. This can be resolved by utilizing the vertical-align CSS property.

To avoid this issue, add vertical-align: top; to the CSS declaration of the container. This ensures that all columns align vertically at the top, regardless of the content within each column.

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

Alternative Approaches

Although inline-block can be used to create columns, it may not be the optimal solution due to potential white space issues between columns. Consider using flex box or CSS grid instead, as they provide more control over column layout and alignment.

The above is the detailed content of How to Align Inline-Block Columns Vertically?. For more information, please follow other related articles on the PHP Chinese website!