如何让并排等高div内的button按钮对齐到同一水平高度

推荐方案：CSS Flex实现（无需额外JS） #

该方案通过flex布局自动实现列等高+按钮底部对齐，逻辑更稳定，无JS计算的抖动问题，可直接删除你原有的高度计算JS代码。

修改步骤： #

1. 给包裹三个.three_divs的外层div添加类名card-container，修改后的HTML外层结构如下：

<div class="card-container">
  <!-- 原有三个.three_divs结构不变 -->
</div>

2. 替换原有CSS为以下内容：

.card-container {
  display: flex;
  /* 控制列之间的间距，可自行调整 */
  gap: 5%;
}
.three_divs {
  width: 30%;
  /* 内部元素纵向排列 */
  display: flex;
  flex-direction: column;
}
/* 让列表自动填充剩余垂直空间，按钮自然被挤到容器底部 */
.three_divs ul {
  flex-grow: 1;
  /* 可根据需要调整ul的底部边距，控制和按钮的间距 */
  margin-bottom: 12px;
}

兼容方案：JS动态计算margin-top（适合无法修改布局的老场景） #

如果需要保留原有float布局，可通过JS计算每个按钮需要的上边距实现对齐，同时修正了你原有代码只取第一个div高度的逻辑问题：

function alignCardsAndButtons() {
  const divs = document.getElementsByClassName("three_divs");
  let maxHeight = 0;
  // 第一步：计算所有div的自然高度，取最大值作为统一高度
  for (let i = 0; i < divs.length; i++) {
    // 清空之前的样式，避免窗口缩放时计算出错
    divs[i].style.height = 'auto';
    divs[i].querySelector('button').style.marginTop = '0';
    const currentHeight = divs[i].getBoundingClientRect().height;
    maxHeight = currentHeight > maxHeight ? currentHeight : maxHeight;
  }
  // 第二步：统一设置div高度，计算每个按钮的上边距
  for (let i = 0; i < divs.length; i++) {
    divs[i].style.height = maxHeight + 'px';
    const btn = divs[i].querySelector('button');
    const extraMargin = maxHeight - (btn.getBoundingClientRect().bottom - divs[i].getBoundingClientRect().top) - 10;
    btn.style.marginTop = extraMargin + 'px';
  }
}
alignCardsAndButtons();
window.onresize = function(){ alignCardsAndButtons() };

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