如何使两个HTML盒子保持尺寸一致，不受内容多少影响？

方法1：使用CSS Flexbox #

将两个盒子放入flex容器中，flex项目默认会自动拉伸以匹配容器高度，无论哪个盒子内容被撑大，另一个都会同步对齐高度。

示例代码：

<div class="flex-container">
  <div class="box">内容较少的盒子</div>
  <div class="box">内容较多的盒子，这里可以放很多很多文本，用来测试高度是否会被撑大，另一个盒子是否会同步高度</div>
</div>

<style>
.flex-container {
  display: flex;
  gap: 10px; /* 可选，设置盒子间的间距 */
}

.box {
  border: 1px solid #ccc;
  padding: 10px;
  flex: 1; /* 可选，让两个盒子平分容器宽度 */
}
</style>

方法2：使用CSS Grid #

Grid布局能轻松实现等高/等宽盒子，将容器设为网格并指定列数后，网格项会自动匹配尺寸。

示例代码：

<div class="grid-container">
  <div class="box">内容较少的盒子</div>
  <div class="box">内容较多的盒子，这里可以放很多很多文本，用来测试高度是否会被撑大，另一个盒子是否会同步高度</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列平分容器宽度 */
  gap: 10px;
}

.box {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

方法3：使用CSS Table布局（兼容旧浏览器） #

如果需要兼容较老浏览器，可以借助table布局特性，让盒子像表格单元格一样自动对齐高度。

示例代码：

<div class="table-container">
  <div class="box">内容较少的盒子</div>
  <div class="box">内容较多的盒子，这里可以放很多很多文本，用来测试高度是否会被撑大，另一个盒子是否会同步高度</div>
</div>

<style>
.table-container {
  display: table;
  width: 100%;
  border-spacing: 10px; /* 替代gap属性，设置盒子间距 */
}

.box {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

其中Flexbox和Grid是当前主流方案，语法简洁且兼容性覆盖绝大多数现代浏览器，推荐优先使用。

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