如何对齐两个水平排列div内的段落 解决子元素高度差导致的错位

问题核心 #

两个卡片的副标题区域高度不统一，且卡片内部未做竖向布局的高度对齐控制，导致段落起始位置不一致。

修改方案 #

1. CSS调整 #

移除无效属性，调整布局逻辑，统一副标题区域高度：

.kind-words {
  margin-top: 3%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 4%;
  display: flex;
  gap: 2%; /* 替代左右margin实现卡片间距，避免宽度溢出 */
}

.word {
  background-color: #F5F5F5;
  flex: 1; /* 自动均分父级宽度，适配间距 */
  padding: 3% 5%;
  border: 1px solid #B1976B;
  display: flex;
  flex-direction: column; /* 内部元素纵向排列 */
}

/* 主标题公共样式 */
.card-title {
  text-align: center;
  font-family: avenirNext;
  font-size: 30px;
  color: #B1976B;
  margin: 0 0 10px 0;
}

/* 副标题公共样式，统一最小高度适配两行内容 */
.card-subtitle {
  min-height: 60px; /* 可根据实际显示效果调整数值 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: avenirNext;
  font-size: 20px;
  color: #B1976B;
  margin: 0;
}

/* 段落公共样式 */
.card-desc {
  text-align: justify;
  font-family: avenirnext;
  font-size: 20px;
  line-height: 1.5em;
  color: #54595F;
  margin: 20px 0 0 0;
}

2. HTML调整 #

优化语义化标签，移除冗余行内样式：

<div class="kind-words">
  <div class="word">
    <h1 class="card-title">Mark D. Griffith</h1>
    <h2 class="card-subtitle">Griffith & Associates</h2>
    <p class="card-desc">I would not try any level criminal allegation regarding sexual assault without the help of Dr. Pierce. I have tried many of these cases and the most valuable asset when I do is Dr. Pierce. He has testified in many of my cases with the outcome being the two word verdict my client so badly needs. The most clear and concise witness I have ever used. I have come to the point where I feel the only way to be truly effective is to have him on our team when we go to trial. He is approachable, understanding, and infinitely knowledgeable.
    </p>
  </div>
  <div class="word">
    <h1 class="card-title">Katheryn H. Haywood</h1>
    <h2 class="card-subtitle">The Law Office of<br> Katheryn H. Haywood, PLLC</h2>
    <p class="card-desc">Dr. Pierce is my ONLY expert for child abuse cases. He is a national leader in understanding false accusations based on fear of the boogey man/family dynamics/hyper-sensitivity to touching based on past trauma. I have been doing sex defense work for 20 years. Dr. Pierce is the expert I rely on to help me understand the intricacies of my cases. He is a straight shooter. And perhaps more importantly, he speaks very well to juries in common language which is clear, concise, and not elitist. I have 5 cases pending with Dr. Pierce and have yet to lose one where he has consulted/testified.
    </p>
  </div>
</div>

额外说明 #

如果不想修改原有标签结构，仅给原有h1元素添加对应类名也可实现对齐效果。

原效果示意图：

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