All child divs have the same height

Case in this article: 3 sub-divs with different contents have the same height

Step 1: Write HTML code

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

Step 2: Set the CSS of the div

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

PS: "display: table-cell" will cause the margin property to be invalid . If you need to set the outer margin, you can add "border-collapse: separate;" and "border-spacing: 30px;" attributesin the parent DIV

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

Step 3: See the final effect of adding margins

expand:

display: table is equivalent to the "table" label; display: table-row is equivalent to the "tr" label; display: table-cell is equivalent to the "td" label

Issues to be noted when using the display: table attribute:

1.display: table: The padding attribute of the element will be invalid;

2.display: table-row: The padding and margin attributes of the element will be invalid;

3. display: table-cell: The margin attribute of the element will be invalid;

4.displaty: table-cell can not be used at the same time as float float, position positioning and other attributes that change the layout, otherwise the effect will be destroyed