用css样式围剿等高列问题
明修栈道暗度陈仓
该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距。”看完下面的几行代码,再看这句话你真的可以看到圣光!
隐藏容器溢出。将外层容器的溢出设为隐藏:
.container {
overflow: hidden;
}
这个时候刷新页面是没有效果的,配合下一步才会看见光芒:
.left, .center, .right {
float: left;
width: 300px;
margin: 30px 10px;
// 为所有的列添加以下两行
padding-bottom: 500px;
margin-bottom: -500px;
}
上面就是正负内外边距:将内边距底部设为不可能会用到的一个正高度,同时将外边距底部设为相反数,巧妙地消除了内边距的冗余高度。太棒了,看效果:
理解这种多列等高的方案,有三个要点:为什么设置 padding-bottom
?为什么设置 margin-bottom
?为什么设置 overflow: hidden
?
- 设置
padding-bottom
。设置该属性可以扩大背景色渲染的范围,当背景色足够大时,就为裁剪提供了基本条件。实际上内容区域仍然不等高。 - 设置
margin-bottom
。设置该属性用于消除占据的多余空间,是对上一个属性的弥补性措施。 - 设置
overflow: hidden;
。当内容高度扩充时,容器高度就会扩充,通过为容器设置该属性,本意是裁减容器的多余部分,实际上裁剪的目标是容器内部的多列,这就是明修栈道暗度陈仓。
使用开发者工具检查时,就可以对此了解一二:
就像面说到的,暂时还没有完美的方案。这种方案最大的缺陷在于无法设置底部边框,算是牺牲了 border-botton
属性。这种方案可以满足其他所有的要求,兼容性更是做到了 IE6+:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。