使用“display: inline-block”時如何保持列對齊？

使用Display: Inline-Block 保持列對齊

在多列佈局中使用display: inline-block 時，重要的是要

在多列佈局中使用display: inline-block 時，重要的是要

在多列佈局中使用display: inline-block 時，重要的是要

在多列佈局中使用display: inline-block 時，重要的是要考慮將內容新增至其中一列時，列會向下移動的問題。這種佈局中斷可以透過使用 Vertical-align 屬性在頂部垂直對齊列來解決。

透過合併 Vertical-align: top;在 CSS 聲明中，我們確保各列在頂部對齊，無論添加到每列的內容如何。這可以防止佈局的其餘部分受到影響並保持所需的水平對齊方式。

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

包含Vertical-align 屬性的增強程式碼範例：

值得注意的是，在顯示時：inline-block 可用於列佈局，還有更現代和靈活的選項可用，例如Flexbox 或CSS 網格。這些方法可以為建立多列排列提供更好的控制和更有效的解決方案。

以上是使用“display: inline-block”時如何保持列對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！