关于等高布局

这几天要做一个简单的培训,想来想去,准备了等高布局的有关知识。(嘻嘻 ,这是参考别人的弄出来的,,放到自己的园子里,收藏了)

等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的 值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是 它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则 会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的, 所以就成功的完成了一个障眼法。

下面来通过具体的事例看看什么是等高布局

没用等高布局前的代码:

使用等高布局后:

posted @ 2013-06-27 16:48  小脾气_m  阅读(131)  评论(0编辑  收藏  举报