多列等高实现

需求

无法提前获知最高列的长度时实现多列等高对齐的方法

兼容最好的方法--padding补偿法

原理：用padding把所有列的高度拉长，再用margin负值拉上去，父元素要设置超出隐藏

缺点

​ 以前在子元素底部做的效果无法实现如底边边框，更多超链接等

适合响应式开发的方法--table法

原理：借助table的自适应特性，每个div时一个td,td肯定是等高的

.wrapper{   
    display:table;
    border-spacing:20px;/*td间距*/
 }
.wrapper > div{   
    display:table-cell;
    width:300px;
    border:2px solid green;
}

@media (max-width:500px){
    .wrapper{
        display:block;
    }
    .wrapper > div{
        display:block;
        width:100%;
    }
}

结果截图

未使用padding法.png

使用padding方法.png

使用table方法.png

响应式.png