如何在双栏布局中对齐左右Div元素？

问题说明 #

当前实现中，左侧第一个"This is about Tennis"与右侧第一个"This is about Basketball"可以对齐，但左侧第二个"This is about Basketball"和右侧第二个"This is about Tennis"无法对齐，核心原因是Tennis的描述内容比Basketball短，导致对应Div高度不一致。

需求：无论两侧描述内容长短，左右对应的Div始终保持在同一行对齐。

已尝试方案：给.newsLetterDiv添加display: grid和grid-template-columns: 1fr 1fr，未解决问题。

解决方案 #

问题出在左右列容器未同步行高，每个独立的.newsLetterDiv无法感知另一侧对应元素的高度。通过以下CSS调整即可解决：

1. 外层容器设置网格布局 #

让整个双列容器成为网格，确保左右两列宽度对等：

.TwoColumnUnit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 可选，添加列之间的间距 */
}

2. 左右列容器同步行高 #

让左右两个列容器也使用网格布局，设置grid-auto-rows: 1fr，强制每一行的高度匹配同一行中最高的元素：

.TwoColumnUnit_Left, .TwoColumnUnit_Right {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 15px; /* 可选，添加行之间的间距 */
}

3. 优化单个内容块的内部布局（可选） #

如果需要让每个内容块的左侧标题和右侧内容顶部对齐，可调整.newsLetterDiv的样式：

.newsLetterDiv {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border: 1px solid #eaeaea; /* 可选，方便查看对齐效果 */
}

.left_Side {
  flex-shrink: 0;
  width: 180px; /* 固定标题区域宽度，避免因标题长度导致布局偏移 */
}

完整代码示例 #

HTML结构 #

<div class="TwoColumnUnit">
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-route"></i>
                    <h3>This is about Tennis</h3>
                </div>
                <div class="right_Side">
                    <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-basketball"></i>
                    <h3>This is about Basketball</h3>
                </div>
                <div class="right_Side">
                    <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Right">    
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-basketball"></i>
                    <h3>This is about Basketball</h3>
                </div>
                <div class="right_Side">
                    <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-route"></i>
                    <h3>This is about Tennis</h3>
                </div>
                <div class="right_Side">
                    <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS样式 #

.TwoColumnUnit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.TwoColumnUnit_Left, .TwoColumnUnit_Right {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 15px;
}

.newsLetterDiv {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border: 1px solid #eaeaea;
}

.left_Side {
  flex-shrink: 0;
  width: 180px;
}

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