最近群里这个问题比较热门,决定把我收藏的方法分享大家。在开始时,我们先看一下万能的table实现。
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]
好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法—— 站长教学网 eduyo.com
背景图片法
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]
CSS表达式法
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]
绝对定位法
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]
display:inline-block法
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]
writing-mode法
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]
站长教学网 eduyo.com
[站长教学网提示:Ctrl+A全选/可修改后代码再运行!]