左右两栏等高实现方法
周三,2009 十一 11 11:21:51
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白,有时需要让右边的高度和左边的保持一致。实现的方法有很多,以前一般是用背景填充来模拟。虽然很简单,但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度,然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏,我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度,从而实现了等高。
提示:你可以先修改部分代码再运行。
这里考滤到一个意外,就是右边的内容比左边多的时候;其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高,两边的高度始终都是一样的。利用这个原理,我们还可以实现三列多列等高布局。
顺便讲下JQ的实现方法。也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了。看代码:
- jQuery(document).ready(function() {
- var _leftheight = jQuery(".left").height();
- _rightheight = jQuery(".right").height();
- if(_leftheight > _rightheight ) {
- jQuery(".right").height(_leftheight);
- }
- else {
- jQuery(".left").height(_rightheight);
- }
- })
好了,到这里相信大家已经都会了。其实还有一些方法可以实现等高的,比如说背景,大家没事研究研究吧;
上一篇:新工作,新起点。



之前好像看过你发布相关的文章啊。
Jquery的功能越来越强大了!!
强大吗