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中文網其他相關文章!