三列布局设置同等高度

要实现三列布局设置同等高度，可以使用Flexbox布局或者Grid布局。以下是两种实现方法：

使用Flexbox布局：

HTML结构：

<div class="container">
  <div class="col col1">Column 1</div>
  <div class="col col2">Column 2</div>
  <div class="col col3">Column 3</div>
</div>

CSS样式：

.container {
  display: flex;
}

.col {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

.col1 {
  background-color: #f4f4f4;
}

.col2 {
  background-color: #e0e0e0;
}

.col3 {
  background-color: #ccc;
}

使用Grid布局：

HTML结构：

<div class="container">
  <div class="col col1">Column 1</div>
  <div class="col col2">Column 2</div>
  <div class="col col3">Column 3</div>
</div>

CSS样式：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.col {
  padding: 20px;
  border: 1px solid #ccc;
}

.col1 {
  background-color: #f4f4f4;
}

.col2 {
  background-color: #e0e0e0;
}

.col3 {
  background-color: #ccc;
}

以上两种方法都可以实现三列布局设置同等高度，具体选择哪种方法可以根据具体需求和浏览器兼容性来决定。