用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?

  1. 设置 padding-bottom。设置该属性可以扩大背景色渲染的范围,当背景色足够大时,就为裁剪提供了基本条件。实际上内容区域仍然不等高。
  2. 设置 margin-bottom。设置该属性用于消除占据的多余空间,是对上一个属性的弥补性措施。
  3. 设置 overflow: hidden;。当内容高度扩充时,容器高度就会扩充,通过为容器设置该属性,本意是裁减容器的多余部分,实际上裁剪的目标是容器内部的多列,这就是明修栈道暗度陈仓。

使用开发者工具检查时,就可以对此了解一二:

技术分享
元素审查

就像面说到的,暂时还没有完美的方案。这种方案最大的缺陷在于无法设置底部边框,算是牺牲了 border-botton 属性。这种方案可以满足其他所有的要求,兼容性更是做到了 IE6+:

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。