overflow与position是两种不同的人生境界(附多栏等高的实现)
2010-06-10 16:27
651 查看
这个姑且算是最近看《德道经》的偶悟吧。
先说问题。Twitter相信大家都知道,或者国内的QQ微博、新浪微博。一般页面宽度800px,两栏。左右“内容等高”,这里要打个引号。右栏一般是带色的,左栏则为白底,看起来是等高。
虽然大多数情况下左高>右高,但如何确保万无一失,实现两栏自适应等高呢?先来看看各大网站的实现,知己知彼才能百战不殆。
1、Twitter。X!居然是用table实现的- -。在这个号称div+css满天飞的Web2.0时代,他们居然用这么老土的table?!然而正如《德道经》里讲到,天为乾,地为坤,天地中和乃生万物。”土“是一种返璞归真的精神。成语”出生入死“讲得就是”入土为安“的道理。人家用table自然有他自己的道理,语义化上table用来呈现数据也说得过去,毕竟人家是这么大的一个平台,还得考虑兼容性,当然最初的原因是否是为了实现这个左右栏等高也说不定(偷笑),所以都说twitter网站做得烂。
2、QQ微博。用了个偷鸡取巧的方法。在父容器#mainWrapper上加了个居右、纵轴平铺的bg,既然是repeat-y,干嘛图片要210*49这么奇怪的宽高?还好用的是data-uri省了个http request,要不猫哥就要BS它了。
3、新浪微博。对新浪有偏见,懒得说它,我是力顶三表哥的。
这里引入一个通过纯CSS的实现方法,这种负边距的方法当然不是猫哥发明的,我也是从这里看到的。这里顺带说下CSS布局的话,推荐射雕同学的系列文章,很详细了。
废话少说,直接移步去看DEMO,右键查看下源代码。
在DEMO上如果注意看的话会发现有一句
#description{overflow:hidden}
实现这个效果,就得在他们的父容器上加上overflow:hidden,这样才能把难看的长尾巴遮住。忽然就想起小高、干干、欣欣他们刚入职的时候,给他们讲过一节CSS的中级(不是终极)培训。我说,如果遇到IE下奇怪的样式兼容性BUG,排名第二的来个overflow:hidden试试(排名第一的是zoom:1)。这句话是我的经验之谈,而且大多数情况下还挺管用。
然而今天在我写下这段代码之后,结合之前看的那一点点《德道经》的内容,我忽然意识到overflow:hidden是一个巨大的阴谋。它让一些本来存在的事物,不被外界所知道,它把一些充满活力的元素限制在一个死死的条框中,让这块土地死气沉沉。《国语·周语上》有云“防民之口,甚于防川,川壅而溃,伤人必多,民亦如之。是故为川者,决之使导;为民者,宣之使言。”
twitter上刚刚看到@fenng同学说自己已经离职支付宝,祝愿他前程似锦。在我看来,主动选择离职创业的人,都是勇敢的。想起昨晚半亩地吃饭,送走一位即将去美利坚合众国求学的友人。相信他的世界已经不再是overflow:hidden,而是position:relative。正如本文中的配图,风筝是一个absolute的元素,它飞得再高再远,对于线另一头的主人来说,永远联系牵挂在心。
overflow与position是两种截然不同的修身、治国(管理)、平天下的人生境界。就算没有鲲鹏展翅那般注目,一只苍蝇至少有一双可以自由飞翔的翅膀。
相关文章推荐
- 《Spark商业案例与性能调优实战100课》第9课:商业案例之通过Spark SQL 下两种不同方式实现口碑最佳和最热门电影比较
- 使用RecyclerView实现两种不同Item布局
- Singleton的两种不同实现方法.
- 两种不同的方法来实现一个两列布局
- 用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- TabHost两种不同的实现方式
- 人生有两种境界:一是痛而不言,二是笑而不语(zt)
- 多个按钮Button实现的两种不同写法
- 交换函数的两种不同的实现方式------地址传递和引用参数
- 关于vector的erase删除操作的两种不同方法,在linux与visual studio的实现讨论
- python实现快速排序算法(两种不同实现方式)
- 用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- 利用两种不同的NAT配置实现两个接口的双向静态NAT测试
- 杨辉三角形(pascal triangle)的两种不同思路的C实现方法
- TabHost两种不同的实现方式
- jdbc两种不同的实现
- 不同IE版本,引入不同的js文件。两种实现方式
- 归并排序的两种不同实现
- RecyclerView的不同position加载不同View实现
- 自己会与能把别人教会是两种不同境界