html显示多个相同内容,css实现多个并排DIV自适应内容等高(相同高度)

如何能使并列的三个div高度相同呢？

他们的高度是不确定的，这个我知道可以用js实现，不过不想用，想求教一下css能不能解决这个问题。

实现方法一：使用css Flexbox

.row {

display: flex; /* equal height of the children */

}

.col {

flex: 1; /* additionally, equal width */

}

M/style>

...

...

...

方法二：表格布局Table layout

如果您仍然需要支持IE 8或9，那么您必须使用表格布局：

.row {

display: table;

}

.col {

display: table-cell;

width: 33.33%; /* depends on the number of columns */

}

方法三：CSS网格Grid

HTML:

{...}

{...}

{...}

CSS:

.container {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.element {

border: 2px solid #000;

}