div 左右排列 高度自适应_css小技巧：如何实现多列高度不同的div等高

网页布局中会用到多列div高度等高的情况，最简单的方法是设置为一固定高度，但是如果div内的内容不定的话不能做到自适应高度，今天小编就给大家分享下几种实现多列高度不同的div等高的方法。

实现多列高度不同的div等高

第一种：利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏(overflow:hidden)

这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

#wrap { overflow: hidden; width: 1000px; margin: 10px auto; position: relative; } .box { float: left; width: 190px; padding-bottom: 820px; margin-bottom: -800px; }

第二种：定义父盒子为表格， 使用 table-cell

#wrap { overflow: hidden; width: 1000px; margin: 10px auto; display: table;} .box { width: 190px; display: table-cell;vertical-align: middle;}

第三种：使用css3盒模型display:box

不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。

#wrap { display: -webkit-box; overflow: hidden; width: 1000px; margin: 10px auto; } .box { width: 190px; }