两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

代码：

效果图：

路人甲：OK?

等高了？？

路人丙：不是吧？

路人乙：你这是在逗我？

xiaomogg：

效果有点慘，只是这的确是已经做了登高处理的

为什么“登高”，看起来却不等高

请留意代码处红框处

 padding-bottom:99px;
  margin-bottom:-99px;

路人甲：这说明不了什么问题！

！

路人乙：快进入主题吧

路人丙：......................

xiaomogg：

事实上“等高” 真的是不等高

1.假设把padding-bottom:99px;  margin-bottom:-99px;的值该大点比如：padding-bottom:999px;  margin-bottom:-999px，同一时候给两列最外层加入overflow：hidden；就能看到“等高”了

2.其实，上面个样例假设不添加margin负值和padding的值，及时最外层给了overflow：hidden，效果仍然如上

3.再看看第一步的效果图

两边”“登高”了，及时右側没有不论什么东西，只是这仅仅是“障眼法”

①去掉最外层的overflow：hidden。

②或两列随意一列的填充内容高度大于999就会看到不等高的情况了

③“等高两列布局”，“登高多列布局”，假设单纯用csss做的话，仅仅是取巧或“障眼法”，假设出现上面两张情况或未知情况的话，“登高”

的弊端就暴露在眼前

④假设能够限制两列内容高度。能够尝试使用纯css 两列布局

以上效果经过检測，支持IE7 谷歌  火狐