вертикальное выравнивание столбцов встроенного блока

При использовании Display: Inline Block для создания столбцов становится очевидным, что когда контент добавляется в первый столбец, последующие столбцы спускаются версически. Это может быть разрешено с использованием свойства CSS с вертикальным согласованным. к объявлению CSS контейнера. Это гарантирует, что все столбцы выравнивают вертикально вверху, независимо от содержания в каждом столбце.

. Cont Span { дисплей: встроенный блок; Вертикальная атака: сверху; высота: 100%; Линия-высота: 100%; Ширина: 33,33%; Схема: 1px пунктир красный; / * Просто для демонстрации */ }

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

, хотя встроенный блок можно использовать для создания столбцов, это не может быть оптимальным решением из-за потенциальных проблем с белым пространством между столбцами. Вместо этого рассмотрите возможность использования Flex Box или CSS, так как они обеспечивают больший контроль над макетом столбца и выравниванием.