首頁  >  文章  >  web前端  >  如何垂直對齊內聯塊列以獲得一致的佈局?

如何垂直對齊內聯塊列以獲得一致的佈局?

Barbara Streisand
Barbara Streisand原創
2024-11-05 21:13:02779瀏覽

How to Vertically Align Inline-Block Columns for Consistent Layout?

Inline-Block 列的垂直對齊

使用inline-block 建立列時,解決列下移的挑戰至關重要在第一列中新增了內容。要解決這個問題,我們需要確保正確的垂直對齊。

解決方案在於添加 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 */
}

這可以確保即使在不同的情況下第一列中的內容,其他列保持頂部對齊。

雖然 inline-block 確實有其缺點,但它仍然是建立簡單列的有效選項。但是,請考慮使用 Flexbox 或 CSS 網格來實現更進階的列佈局。

以上是如何垂直對齊內聯塊列以獲得一致的佈局?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn