如何将所有元素高度设置为最高元素高度（优先非JS方案）

下面是几种无需JavaScript就能让列布局中所有元素高度与最高元素保持一致的方法：

方法1：Flexbox布局（推荐，现代浏览器兼容） #

这是目前最简洁高效的方案，利用Flexbox的默认拉伸特性，子元素会自动填充容器高度，与最高元素保持一致。

修改后的CSS代码：

.container {
  display: flex;
  gap: 10px; /* 可选，设置列之间的间距 */
}

.content {
  border: 1px solid black;
  flex: 1; /* 可选，让各列宽度均分，若不需要可移除 */
}

HTML代码无需修改，保持原结构即可。

方法2：CSS Grid布局 #

Grid布局同样能自动让单元格高度统一，适合更复杂的网格场景。

修改后的CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列均分宽度，可根据需求调整 */
  gap: 10px; /* 可选，列间距 */
}

.content {
  border: 1px solid black;
}

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

如果需要兼容IE等旧浏览器，可以用Table的布局特性，模拟表格单元格的等高效果。

修改后的CSS代码：

.container {
  display: table;
  width: 100%; /* 可选，让容器占满宽度 */
  border-collapse: separate;
  border-spacing: 10px; /* 模拟列间距 */
}

.content {
  display: table-cell;
  border: 1px solid black;
}

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