代码:
效果图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
路人甲: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.再看看第一步的效果图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
两边”“登高”了,及时右側没有不论什么东西,只是这仅仅是“障眼法”
①去掉最外层的overflow:hidden。
②或两列随意一列的填充内容高度大于就会看到不等高的情况了
③“等高两列布局”,“登高多列布局”,假设单纯用csss做的话,仅仅是取巧或“障眼法”,假设出现上面两张情况或未知情况的话,“登高”
的弊端就暴露在眼前
④假设能够限制两列内容高度。能够尝试使用纯css 两列布局
以上效果经过检測,支持IE7 谷歌 火狐