CSS 实现多个水平排列 div 高度统一的方法

在网页设计和开发中，经常会遇到需要将多个水平排列的div元素的高度统一的情况。这样可以使页面布局更加整齐、美观，提升用户体验。下面将介绍几种常见的CSS方法来实现这一效果。

方法一：使用flex布局

flex布局是现代CSS中用于实现灵活的页面布局的强大工具。通过将父元素设置为flex容器，并设置align-items: stretch属性，可以让所有子元素在交叉轴上拉伸至与最高元素相同的高度。

示例代码如下：

.parent {
  display: flex;
  align-items: stretch;
}
.child {
  flex: 1;
}

在上述代码中，.parent类表示父元素，设置为flex容器，并通过align-items: stretch使子元素高度统一。.child类表示子元素，flex: 1表示子元素将平均分配父元素的剩余空间。

方法二：使用grid布局

grid布局也是一种强大的CSS布局方式。通过将父元素设置为grid容器，并设置合适的网格模板，可以轻松实现多个div元素的高度统一。

示例代码如下：

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.child {
  grid-row: 1;
}

在上述代码中，.parent类表示父元素，设置为grid容器，并通过grid-template-columns定义了三列网格，每列宽度相等。.child类表示子元素，grid-row: 1表示所有子元素都位于第一行，从而实现高度统一。

方法三：使用JavaScript

除了CSS方法外，还可以使用JavaScript来动态获取最高元素的高度，并将其他元素的高度设置为与之相同。

示例代码如下：

var elements = document.querySelectorAll('.child');
var maxHeight = 0;
elements.forEach(function(element) {
  if (element.offsetHeight > maxHeight) {
    maxHeight = element.offsetHeight;
  }
});
elements.forEach(function(element) {
  element.style.height = maxHeight + 'px';
});

在上述代码中，首先通过querySelectorAll获取所有子元素，然后遍历子元素找到最高元素的高度，最后再遍历子元素将它们的高度设置为最高元素的高度。

通过上述方法，我们可以轻松实现多个水平排列div元素的高度统一，从而使网页布局更加美观、整齐。