如何让Flex布局右侧列偏移左侧列高度的50%（动态高度）

你可以通过调整HTML结构并结合CSS定位/网格布局实现需求，无需依赖JavaScript。以下是两种可行的纯CSS方案：

方案1：绝对定位方案（精准偏移主列高度的50%） #

核心思路是将每组主列与副列包裹在独立容器中，利用绝对定位让副列相对于容器偏移50%高度，完全跟随主列的动态高度变化。

调整后的HTML结构 #

给每一组.col--main和.col--alt添加包裹容器.item-group：

<div class="container">
  <div class="row">
    <div class="item-group">
      <div class="col-6 col--main">
        <h2>this is a title and test</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam mauris a massa dapibus efficitur. Donec scelerisque leo eget neque lacinia, id tincidunt est tempus. Nunc tincidunt sit amet diam in vestibulum. Phasellus ut sagittis leo. Fusce ut est convallis, commodo diam id, vehicula nulla. Fusce congue, nibh fringilla dignissim blandit, enim nunc mollis metus, finibus pharetra lectus elit eu libero. Nunc sodales ultricies placerat. Proin auctor consequat augue sed commodo.
        </p>
      </div>
      <div class="col-6 col--alt">
        <h2>another title and test</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam mauris a massa dapibus efficitur. Donec scelerisque leo eget neque lacinia, id tincidunt est tempus. Nunc tincidunt sit amet diam in vestibulum. Phasellus ut sagittis leo. Fusce ut est convallis, commodo diam id, vehicula nulla. Fusce congue, nibh fringilla dignissim blandit, enim nunc mollis metus, finibus pharetra lectus elit eu libero. Nunc sodales ultricies placerat. Proin auctor consequat augue sed commodo.
        </p>
      </div>
    </div>
    <div class="item-group">
      <div class="col-6 col--main">
        <h2>this is a title and test</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam mauris a massa dapibus efficitur. Donec scelerisque leo eget neque lacinia, id tincidunt est tempus. Nunc tincidunt sit amet diam in vestibulum. Phasellus ut sagittis leo. Fusce ut est convallis, commodo diam id, vehicula nulla. Fusce congue, nibh fringilla dignissim blandit, enim nunc mollis metus, finibus pharetra lectus elit eu libero. Nunc sodales ultricies placerat. Proin auctor consequat augue sed commodo.
        </p>
      </div>
      <div class="col-6 col--alt">
        <h2>another title and test</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam mauris a massa dapibus efficitur. Donec scelerisque leo eget neque lacinia, id tincidunt est tempus. Nunc tincidunt sit amet diam in vestibulum. Phasellus ut sagittis leo. Fusce ut est convallis, commodo diam id, vehicula nulla. Fusce congue, nibh fringilla dignissim blandit, enim nunc mollis metus, finibus pharetra lectus elit eu libero. Nunc sodales ultricies placerat. Proin auctor consequat augue sed commodo.
        </p>
      </div>
    </div>
    <div class="item-group">
      <div class="col-6 col--main">
        <h2>this is a title and test</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam mauris a massa dapibus efficitur. Donec scelerisque leo eget neque lacinia, id tincidunt est tempus. Nunc tincidunt sit amet diam in vestibulum. Phasellus ut sagittis leo. Fusce ut est convallis, commodo diam id, vehicula nulla. Fusce congue, nibh fringilla dignissim blandit, enim nunc mollis metus, finibus pharetra lectus elit eu libero. Nunc sodales ultricies placerat. Proin auctor consequat augue sed commodo.
        </p>
      </div>
      <div class="col-6 col--alt">
        <h2>another title and test</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam mauris a massa dapibus efficitur. Donec scelerisque leo eget neque lacinia, id tincidunt est tempus. Nunc tincidunt sit amet diam in vestibulum. Phasellus ut sagittis leo. Fusce ut est convallis, commodo diam id, vehicula nulla. Fusce congue, nibh fringilla dignissim blandit, enim nunc mollis metus, finibus pharetra lectus elit eu libero. Nunc sodales ultricies placerat. Proin auctor consequat augue sed commodo.
        </p>
      </div>
    </div>
  </div>
</div>

对应CSS样式 #

.container {
  max-width: 700px;
  margin: 0 auto;
}

.row {
  width: 100%;
}

.item-group {
  position: relative;
  width: 100%;
  /* 预留副列显示空间，避免遮挡下方内容，可根据实际调整 */
  padding-bottom: 60px;
  margin-bottom: 40px;
}

.col-6 {
  width: 50%;
}

.col--main {
  float: left;
}

.col--alt {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 副列顶部精准偏移主列总高度的50% */
}

方案2：CSS Grid方案（自动适配内容高度） #

若副列高度可能超过主列，用Grid布局可自动让父容器包含所有内容，无需手动设置内边距：

.container {
  max-width: 700px;
  margin: 0 auto;
}

.row {
  width: 100%;
}

.item-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 40px;
}

.col--alt {
  align-self: start;
  /* 让副列顶部对齐主列的垂直中点位置 */
  transform: translateY(50%);
}

说明 #

• 定位方案的top:50%完全基于主列高度计算偏移，精准度更高；
• Grid方案无需处理内容溢出问题，但transform: translateY(50%)是基于副列自身高度的50%偏移，适合主副列高度相近的场景。

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