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

标签: css并排DIV相同高度   时间:2017-11-17
要把多个并排显示的div实现一样高的效果(事先并不能确定哪列的高度),改如何实现呢。其实实现的方法很多,本文章向大家介绍几种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