关于等高布局
这几天要做一个简单的培训,想来想去,准备了等高布局的有关知识。(嘻嘻 ,这是参考别人的弄出来的,,放到自己的园子里,收藏了)
等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的 值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是 它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则 会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的, 所以就成功的完成了一个障眼法。
下面来通过具体的事例看看什么是等高布局
没用等高布局前的代码:
使用等高布局后: