父容器内多个 DIV 如何实现横向排列且高度一致

在网页布局中，经常会遇到需要在父容器内将多个DIV元素横向排列并且保持高度一致的需求。这不仅能让页面布局更加整齐美观，还能提升用户体验。下面就来介绍几种常见的实现方法。

使用Flexbox布局

Flexbox是一种强大的CSS布局模型，能轻松实现元素的横向排列和高度一致。给父容器设置display: flex;，这会使父容器成为一个弹性容器，其子元素（DIV）会自动变为弹性项目并横向排列。为了让它们高度一致，再设置align-items: stretch;，弹性项目会在交叉轴方向上拉伸以填满整个父容器的高度。例如：

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

使用CSS Grid布局

CSS Grid布局同样可以解决这个问题。给父容器设置display: grid;，然后通过grid-template-columns属性定义列的数量和宽度。要使子元素高度一致，只需将父容器的grid-auto-rows属性设置为合适的值，如auto或具体的像素值。示例代码如下：

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

使用JavaScript动态调整高度

如果不想单纯依赖CSS，也可以借助JavaScript来实现。通过获取所有子元素的高度，找到其中最大的高度值，然后将这个高度值赋给所有子元素。以下是一个简单的示例：

const divs = document.querySelectorAll('.parent div');
let maxHeight = 0;
divs.forEach(div => {
  const height = div.offsetHeight;
  if (height > maxHeight) {
    maxHeight = height;
  }
});
divs.forEach(div => {
  div.style.height = maxHeight + 'px';
});

在实际应用中，可以根据具体的项目需求和浏览器兼容性选择合适的方法。Flexbox和CSS Grid布局在现代浏览器中具有良好的支持，而JavaScript方法则更加灵活，适用于一些特殊情况。掌握这些方法，就能轻松实现父容器内多个DIV的横向排列且高度一致，打造出更加美观的网页布局。