如何在html和css中获得相同高度的所有列

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  display: table;
}

.column {
  display: table-cell;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  overflow: hidden; /* 防止子元素溢出 */
}

.column {
  float: left; /* 使列水平排列 */
}

// 使用JavaScript获取最大高度并应用于所有列
var columns = document.getElementsByClassName('column');
var maxHeight = 0;

for (var i = 0; i < columns.length; i++) {
  if (columns[i].offsetHeight > maxHeight) {
    maxHeight = columns[i].offsetHeight;
  }
}

for (var i = 0; i < columns.length; i++) {
  columns[i].style.height = maxHeight + 'px';
}