左右两栏等高实现方法

周三,2009 十一 11 11:21:51

等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

提示：你可以先修改部分代码再运行。

这里考滤到一个意外，就是右边的内容比左边多的时候；其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高，两边的高度始终都是一样的。利用这个原理，我们还可以实现三列多列等高布局。

顺便讲下JQ的实现方法。也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。看代码：

  1. jQuery(document).ready(function() {
  2.     var _leftheight = jQuery(".left").height();
  3.         _rightheight = jQuery(".right").height();
  4.         if(_leftheight > _rightheight ) {
  5.             jQuery(".right").height(_leftheight);
  6.         }
  7.         else {
  8.             jQuery(".left").height(_rightheight);
  9.         }
  10.     })

好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；

上一篇：

下一篇：

   Await |  前端交互 |  浏览：801  

这篇文章已有 4 位网友发表了评论  

  1. 老葛 说：
    2010-02-06 于 10:18 上午

    :o 不知道代码怎么用

    回复
  2. LAONB 说：
    2009-11-11 于 13:57 下午

    之前好像看过你发布相关的文章啊。

    回复
  3. hzhjun 说：
    2009-11-11 于 13:29 下午

    Jquery的功能越来越强大了！！

    回复

发表新的评论

表情
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 



注意：
1、本站启用了审核机制，你的留言可能稍后才会显示，请不要重复提交，谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里。
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。

goto-top