如何调整列高度，使其与同级兄弟列等高并匹配内容最多的列

你现在用float浮动做的多列，因为浮动元素脱离普通文档流，默认没法自动和最高的列对齐高度，下面是几种好用的实现方式：

方案1：Flex布局（首选，代码最少） #

Flex容器的子项默认会在交叉轴方向自动拉伸撑满容器高度，天然就能实现等高效果，不需要写多余的兼容代码。
操作步骤：

• 给所有同组的列加一个父级容器，给这个容器设置display: flex
• 把列上原来的float: left、display: inline-block两个属性删掉，剩下的宽度、边距、背景、内边距样式保留就行
  完整代码参考：

/* 列容器样式 */
.col-group {
  display: flex;
}
.col {
  width: 200px;
  min-height: 100px;
  background-color: #eee;
  margin-right: 20px;
  padding: 10px;
}

<div class="col-group">
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
</div>

这个方案兼容所有现代浏览器，移动端适配也没问题，是目前生产环境用得最多的方案。

方案2：Grid布局（适合规则网格场景） #

如果你的多列是规整的网格排布，用Grid写起来更简洁，父容器设为Grid布局之后，子项默认也是自动等高的：

.col-group {
  display: grid;
  /* 按需求写每列宽度，示例是两列都是200px宽，列间距20px */
  grid-template-columns: 200px 200px;
  column-gap: 20px;
}
.col {
  min-height: 100px;
  background-color: #eee;
  padding: 10px;
}

HTML结构和Flex方案一致，不需要单独给列加右外边距，用容器的column-gap控制间距更省心。

方案3：JS动态计算高度（兼容老旧浏览器用） #

如果需要兼容IE9这类不支持Flex、Grid的老浏览器，可以用JS遍历所有列，算出最高列的高度，再统一给所有列设置这个高度：

// DOM加载完成后执行
window.addEventListener('load', function() {
  const cols = document.querySelectorAll('.col');
  let maxColHeight = 0;
  // 遍历拿到最高列的高度
  cols.forEach(col => {
    maxColHeight = Math.max(maxColHeight, col.offsetHeight);
  });
  // 给所有列设置统一高度
  cols.forEach(col => {
    col.style.height = `${maxColHeight}px`;
  });
});

如果列里的内容会动态变化（比如异步加载内容、展开收起操作），要在内容更新后重新执行这段计算逻辑，不然高度会不对。

不推荐的老旧方案 #

早年间没有Flex、Grid的时候，有人用超大负外边距+正内边距、配合父容器overflow: hidden的方式做等高hack，这种写法可维护性差，很容易出现内容被裁切、滚动行为异常的问题，现在完全没必要用。

内容的提问来源于stack exchange，提问作者Joe Leeson