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

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

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

 

实现方法一：使用css Flexbox

<style>
.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}
M/style>
<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

浏览器支持：http：//caniuse.com/flexbox ; 演示：http : //jsfiddle.net/7L7rS/

 

方法二：表格布局Table layout

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

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

演示：http : //jsfiddle.net/UT7ZD/

 

方法三：CSS网格Grid

HTML:

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

运行实例

原文地址：http://www.manongjc.com/article/2227.html