等高布局就是一行被划分成若干列,每一列的高度是相同的值
实现方式
<div class="parent"> <div class="left">left</div> <div class="right">rkerjerje erjerkerjekrjerlf ererejrjerjerje</div> </div>
1.display属性的值有关table实现等高布局效果
.parent{ display:table; } .left,.right{ width:300px; display:table-cell;/*表格的单元格默认是等高的*/
}
.left{ background-color:#c9394a; }
.right{ background-color:#ccc; }
2.padding + margin属性实现等高布局效果
第二种方案是伪等高布局,只是视觉上等高的伪等高布局
.parent{ overflow:hidden; } .left,.right{ width:300px; float:left; padding-bottom:9999px; margin-bottom:-9999px; } .left{ background-color:#c9394a; } .right{ background-color:#ccc; }
原文:https://www.cnblogs.com/qjb2404/p/12416425.html