如何让两个Panel面板始终保持高度对齐？

这问题我太熟了！你遇到的是典型的动态内容导致容器高度不一致的问题——默认情况下浏览器会让每个面板高度自适应内部内容，所以当Panel 1添加文本变高后，两个面板的底部自然就错开了。下面给你几个亲测有效的解决办法，不管面板里加什么内容，都能让它们始终保持对齐：

方案1：Flexbox布局（最推荐，现代浏览器全覆盖） #

把父容器.row设置为flex布局，子面板会自动拉伸高度，匹配最高的那个容器，完美解决对齐问题：

.row {
  display: flex;
  gap: 1rem; /* 可选，给面板之间添加间距，让布局更美观 */
}

.panel {
  flex: 1; /* 让两个面板平分父容器宽度，可根据需求调整比例 */
  border: 1px solid #ccc;
  padding: 1rem;
}

对应的HTML结构不用改，保持你原来的就行：

<div class="row">
  <div class="panel">
    <h1>Panel 1</h1>
    <p>Remove this</p>
    <!-- 随便加多少内容都没问题 -->
  </div>
  <div class="panel">
    <h1>Panel 2</h1>
  </div>
</div>

方案2：CSS Grid布局 #

和Flexbox一样好用的现代布局方案，用Grid也能轻松实现高度对齐：

.row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽分布 */
  gap: 1rem;
}

.panel {
  border: 1px solid #ccc;
  padding: 1rem;
}

这个方案的优势是如果后续要扩展成多列布局，调整起来会更方便。

方案3：固定高度（仅适合内容高度可控的场景） #

如果你的面板内容高度不会有太大变化，也可以直接给面板设置固定高度，但这种方式灵活性较差，内容超过高度会溢出，所以只推荐在特定场景使用：

.panel {
  height: 300px;
  overflow-y: auto; /* 可选，内容超出时显示滚动条 */
  border: 1px solid #ccc;
  padding: 1rem;
  width: calc(50% - 0.5rem); /* 配合浮动布局时需要手动调整宽度 */
}

总结 #

优先选择Flexbox或Grid方案，这两个是当前前端布局的标准方案，不仅能解决高度对齐问题，还能让你的布局更灵活、更易维护。

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