css设置多列等高布局的方法示例

下面是CSS设置多列等高布局的攻略：

1. 使用flexbox布局

flexbox是一种强大的CSS布局模式，可以帮助实现多列等高布局。

首先需要在容器上设置display: flex;属性，然后对子元素设置flex-grow: 1;属性，这样就可以让所有子元素高度相等。如果需要控制子元素高度不会无限增长，可以设置flex-basis属性来限制子元素的基础尺寸。

以下是一个示例代码：

.container {
  display: flex;
  height: 400px;
}

.container > div {
  flex-grow: 1;
  flex-basis: 0;
  border: 1px solid #ccc;
}

Column 1

Column 2

Column 3

2. 利用display: table;布局

另一种实现多列等高布局的方法是使用display: table;属性。这种布局方式比较适合需要支持低版本IE浏览器的场景。

首先需要在容器上设置display: table;属性，子元素上需要设置display: table-cell; vertical-align: top;属性。vertical-align属性可以控制子元素对齐方式。

以下是一个示例代码：

.container {
  display: table;
  width: 100%;
}

.container > div {
  display: table-cell;
  vertical-align: top;
  border: 1px solid #ccc;
}

Column 1

Column 2

Column 3

以上就是两种实现多列等高布局的方法，可以根据实际情况选择适合的布局方式。