所有子div的高度一样

本文案例：3个不同内容量的子div高度一致

第一步：编写html代码

<div id="parent">
      <div class="child">子div1</div>
      <div class="child">子div2</div> 
      <div class="child">子div3</div>       
</div>

第二步：设置div的CSS

#parent {
    width:100px;
    display:table;   //设置display属性
}
.child {
    width:33px;
    min-height:50px;
    display:table-cell;  //设置display属性
}

PS：“display:table-cell”会导致margin属性失效，如果需要设置外边距的话可以在父DIV中添加“border-collapse:separate;”和“border-spacing:30px;”属性

#parent {
    width:100px;
    display:table;   //设置display属性
    border-collapse:separate;  //“边框分离”模式
    border-spacing:30px;  //设置相邻单元格的边框间的距离
}

第三步：看加上边距的最终效果

拓展：

display: table相当于“table”标签；display: table-row相当于“tr”标签；display: table-cell相当于“td”标签

使用display: table属性应注意的问题：

1.display: table：元素的padding属性会失效；

2.display: table-row：元素的padding和margin属性都会失效；

3.display: table-cell：元素的margin属性会失效；

4.displaty: table-cell不能与float浮动、position定位等改变布局的属性同时使用，否则作用会被破坏