当前位置:

首页 > 前端交互

左右两栏等高实现方法

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

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

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

顺便讲下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.     })

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

本文引用地址: 

相关文章

  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (7)
    作为一个Web开发者,保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3,还是已经略知皮毛,这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (10)
    在做wordpress主题的时候,样式是最重要的一部分。作为主题的制作者,我们不但要考滤页面的还原完整度,还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美,但每个人都想主题更...
  • 2009-06-18 -- 关于CSS的书写习惯 (6)
    其实每个人都有自己喜欢的书写格式习惯,我在刚学CSS的时候,什么都不知道,只是要实现什么效果,我后就写个ID或类进去。放哪个位置也不管,丢进去就行了。反正效果实现了;后来当需要修改某些地方的时候,才发...
  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法! 对于div 1.(IE浏览器)white-space:normal; word-...
  • 2008-11-25 -- CSS清除浮动的一些方法 (5)
    CSS的浮动为我们的布局带来了很大的好处,利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题;这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法: ...

发表评论3 位网友发表了评论  

  1. 老葛 说:

    :o 不知道代码怎么用

  2. LAONB 说:

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

  3. hzhjun 说:

    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空格'的方式将自己的评论通知另外评论者。