调整浏览器大小时如何让两个div的左边距保持对齐

CSS方案（优先选择，无性能消耗） #

导致对齐失效的核心原因是不同元素的左侧边距计算逻辑不统一，优先用纯CSS就能解决：

• 统一边距基准值
  用CSS变量定义通用左边距，所有需要对齐的元素复用同一变量，计算逻辑完全一致，缩放时会同步变化：

  :root {
    /* 可根据需求替换为px/rem，用vw单位可随窗口宽度自适应调整 */
    --align-left-gap: 5vw;
  }
  /* 顶部两个div */
  .top-bar {
    margin-left: var(--align-left-gap);
  }
  /* 卡片div */
  .card-wrapper {
    margin-left: var(--align-left-gap);
    box-sizing: border-box;
  }
  

• 父容器统一管控
  把需要对齐的所有元素放入同一个父容器，只给父容器设置统一的左侧内边距/外边距，子元素无需单独设置边距，天然对齐：

  .global-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    /* 统一的左侧偏移基准，所有子元素默认对齐该位置 */
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  

JS方案（仅特殊场景使用） #

如果业务逻辑复杂无法通过CSS实现，可通过监听窗口缩放事件动态同步边距，注意加防抖避免性能问题：

// 防抖函数
function debounce(func, delay = 100) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 同步边距逻辑
function syncLeftMargin() {
  const cardEle = document.querySelector(".card-div");
  const topEles = document.querySelectorAll(".top-div");
  if (!cardEle || !topEles.length) return;
  // 获取卡片元素距离视口左侧的实际偏移
  const cardLeftOffset = cardEle.getBoundingClientRect().left;
  topEles.forEach(ele => {
    ele.style.marginLeft = `${cardLeftOffset}px`;
  });
}

// 绑定事件
window.addEventListener("resize", debounce(syncLeftMargin));
// 页面初始化时执行一次对齐
window.addEventListener("DOMContentLoaded", syncLeftMargin);

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