如何实现两个独立div容器内同序动态高度列表项垂直对齐

需求与约束 #

• 核心效果：两个独立容器内的列表项高度随内容动态变化，要求第一个容器的第n个列表项，与第二个容器的第n个列表项始终保持顶部水平对齐
• 限制条件：
  • 列表内容动态生成，无法提前设置固定max-height
  • 两组列表分别位于独立div中，无法跨容器使用table、grid布局实现对齐

现有DOM结构 #

<div class="d-flex justify-content-center mt-5">
<div class="col-10 pre-ee_card_container">
    <div class="pre-ee_card mb-5 mb-sm-0">
        <h3>Standard Plan</h3>
        <ul class="right-arrow-bullet">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo doloribus voluptate ex accusantium nulla, explicabo molestias asperiores ipsam. Culpa hic ipsam doloremque impedit totam aliquid vitae maxime iste consequatur libero!</li>
            <li>lorum ipsum dolor sit amet consectetur adipis</li>
            <li>lorum ipsum dolor sit amet</li>
        </ul>
    </div>
    <div class="pre-ee_card">
        <h3>Premium Plane</h3>
        <ul class="right-arrow-bullet">
            <li>lorum ipsum dolor sit amet</li>
            <li>lorum</li>
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </div>
</div>

效果参考 #

实现方案 #

由于无法调整跨容器布局结构，采用JS动态计算高度的方案实现，逻辑为每次触发对齐时，先重置所有列表项高度为内容自适应，再逐行对比同序两个列表项的实际高度，取较大值设为两个列表项的统一高度，即可保证顶部对齐。

核心JS代码 #

function syncListItemHeight() {
  // 抓取两个定价卡片的列表
  const cardLists = document.querySelectorAll('.pre-ee_card .right-arrow-bullet');
  if (cardLists.length < 2) return;
  const standardItems = cardLists[0].querySelectorAll('li');
  const premiumItems = cardLists[1].querySelectorAll('li');

  // 先重置高度，获取内容真实高度
  [...standardItems, ...premiumItems].forEach(item => {
    item.style.height = 'auto';
  });

  // 逐行同步高度
  const itemCount = Math.min(standardItems.length, premiumItems.length);
  for (let i = 0; i < itemCount; i++) {
    const height1 = standardItems[i].offsetHeight;
    const height2 = premiumItems[i].offsetHeight;
    const rowHeight = `${Math.max(height1, height2)}px`;
    standardItems[i].style.height = rowHeight;
    premiumItems[i].style.height = rowHeight;
  }
}

// 页面全量资源加载完成后首次对齐
window.addEventListener('load', syncListItemHeight);
// 窗口尺寸变化时重新计算对齐
window.addEventListener('resize', syncListItemHeight);

使用说明 #

• 如果列表内容为接口异步渲染，在列表项全部插入DOM后，手动调用一次syncListItemHeight()即可
• 该方案不需要修改原有DOM结构，不需要预设固定高度，完全适配动态内容
• 如果后续列表项增删，重新调用方法即可自动完成对齐

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