如何使用 CSS 建立等高列？

使用 CSS 的等高列

在您的程式碼中，您使用 表格版面配置 來建立等高的柱子。但是，此技術不適用於百分比，因為每列的寬度由總列數決定。

Flexbox 解

實現相等的高度列，您可以使用 flexbox。這是一個範例：

ul {
  display: flex; /* Makes the list items align horizontally */
  align-items: stretch; /* Stretches the list items to full height */
}

這將為

中的所有清單項目建立等高的欄位。元素，無論其內容如何。

註：

• Flexbox 僅適用於Flex 容器的直接子級（在本例中，).
• 將高度應用於彈性項目將涵蓋相等的高度功能。
• 等高列僅適用於同一行上的項目。

瀏覽器支援

Flexbox 在以下領域廣泛支援現代瀏覽器，版本 10 以下的 IE 除外。為了確保相容性，請考慮對舊版本使用供應商前綴瀏覽器。

以上是如何使用 CSS 建立等高列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！