如何垂直對齊內聯塊列？

Inline-Block 列的垂直對齊

使用display:inline-block 建立列時，加入內容時會變得很明顯到第一列，後續列垂直下降。這可以透過使用 Vertical-align CSS 屬性來解決。

要避免此問題，請新增 Vertical-align: top;到容器的 CSS 聲明。這可以確保所有列在頂部垂直對齊，無論每列中的內容如何。

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

替代方法

儘管 inline-block 可用於建立列，由於列之間潛在的空白問題，它可能不是最佳解決方案。考慮使用彈性框或 CSS 網格，因為它們可以更好地控制列佈局和對齊。

以上是如何垂直對齊內聯塊列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！