如何使用 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中文网其他相关文章！