完美的DIV三行三列自适应高度布局
我们一般拿出来讨论的自适应高度的DIV布局，都是指有背景区分的，不用区分的三列布局很容易。不过在实际应用中很少有网站这样用，大多都是不用背景区分的。不过在这里我们并不讨论这种布局的实用性到底如何，而只是讨论实现这种布局的一种较完美的解决方案而已。
所谓自适应高度，也就是不管某一列撑长而其它列的高度也跟跟相应地撑长，这个效果如果用TABLE的话是轻而易举的，而用DIV就没那么容易了。之前本民工也尝试了不少办法，比如用JS控制、padding-bottom一个很大的负值……但都觉得不够完美。后来在蓝色理想找到一个国外的站，感觉这是目前为止最完美的一种解决方案了，不用hack、不用JS、兼容性强……他们把这种布局称之为：完美的圣杯。
原理其实很容易，理解之后应该可以解决很多样的布局方案。见上图，.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
今天刚装上了运行代码的插件，贴上来试试。
提示：你可以先修改部分代码再运行。
原文：http://matthewjamestaylor.com/blog/perfect-3-column.htm
2条留言 立即发表评论
障眼法~
实际项目中基本上不会用到这样的布局的，只不过很容易被当做面试题来考罢了。