如何使用 css 使父容器内所有 div 横向排列且高度一致
在 web 页面中，有时需要将父容器内的所有 div 横向排列，并保持相同的高度，而无需显式设置每个 div 的高度。这篇文章将介绍如何使用 css 实现这一效果，从而避免在内容增加时导致 div 高度不一致的问题。
解决方案
使用 flex 布局可以解决此问题。flex 布局是一种强大且灵活的 css 布局模型，可以轻松控制子项目的排列和尺寸。要使用 flex 布局实现横向排列且高度一致的 div，可以按照以下步骤操作：
立即学习“前端免费学习笔记（深入）”；
1. 给父容器添加 flex 布局属性
.flex-container {
display: flex;
align-items: stretch;
}- display: flex 将容器设置为 flex 布局容器。
- align-items: stretch 指定容器中的子项目将垂直拉伸以匹配容器的高度。
2. 省略子 div 的高度属性
不需要显式设置子 div 的高度。flex 布局会自动根据内容调整子 div 的高度。
示例
以下是一个示例 html 和 css 代码，演示了如何使用 flex 布局实现横向排列且高度一致的 div：
内容 1较长的内容 2较短的内容 3
.flex-container {
display: flex;
align-items: stretch;
background-color: lightgray;
padding: 10px;
gap: 10px;
}在这个示例中，父容器被设置为 flex 布局容器，子 div 的高度将垂直拉伸以匹配父容器的高度。因此，尽管子 div 的内容不同，但它们的高度都将保持一致。
