• overflow与position是两种不同的人生境界(附多栏等高的实现)


    这个姑且算是最近看《德道经》的偶悟吧。

    先说问题。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是两种截然不同的修身、治国(管理)、平天下的人生境界。就算没有鲲鹏展翅那般注目,一只苍蝇至少有一双可以自由飞翔的翅膀。

    欢迎关注我的微信公众号「猫哥学前班」

  • 相关阅读:
    Traefik-v2.x快速入门
    jenkins pipeline持续集成
    phpstorm 2017激活码(方法)
    PHP保留两位小数的几种方法
    php 数组排序 按照某字段
    sql大全
    解决jpgraph在php7.0版本下时,无法显示例子图表的问题
    Linux 定时任务crontab使用
    VIM命令操作
    wampserver变橙色,apache 服务无法启动!问题解决小记(安装失败亦可参考)
  • 原文地址:https://www.cnblogs.com/kaiye/p/3039050.html
Copyright © 2020-2023  润新知