V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lvwzhen
V2EX  ›  分享创造

基于 inline-block 的栅格系统

  •  
  •   lvwzhen ·
    lvwzhen · 2014-06-23 11:46:05 +08:00 · 3230 次点击
    这是一个创建于 3784 天前的主题,其中的信息可能已经有所发展或是发生改变。
    根据一丝的「inline-block 前世今生」写了个栅格系统。

    https://github.com/lvwzhen/IBG
    9 条回复    2014-06-23 14:12:36 +08:00
    yangg
        1
    yangg  
       2014-06-23 11:51:58 +08:00
    lz能不能说说两个inline-block之前的换行空白是怎么搞掉的?
    zencoding
        2
    zencoding  
       2014-06-23 11:54:57 +08:00
    个人觉得 stage.purecss.io 的栅格更舒服
    NemoAlex
        3
    NemoAlex  
       2014-06-23 11:56:42 +08:00
    @yangg lz 的代码里是 font-size:0;
    yangg
        4
    yangg  
       2014-06-23 12:00:52 +08:00
    @NemoAlex 看到了,原来是和 letter-spacing 一起才起作用的


    弱弱的问下, letter-spacing: 5px 中这个5px是怎么来的是? font-size为0时,间距总是5?
    lvwzhen
        5
    lvwzhen  
    OP
       2014-06-23 12:07:47 +08:00   ❤️ 1
    @yangg 一丝的「inline-block 前世今生」有详细讲解,可以看一下。
    letter-spacing:-5px;是为了修复 Safari 等不支持字体大小为 0 的浏览器的 hack 。
    http://ued.taobao.org/blog/2012/08/inline-block/
    lvwzhen
        6
    lvwzhen  
    OP
       2014-06-23 12:10:06 +08:00
    @zencoding Pure中是也 inline-block 的栅格,同样是使用letter-spacing和word-spacing消除空白的。
    jsonline
        7
    jsonline  
       2014-06-23 13:29:09 +08:00 via Android
    这样 hack 总觉得不好。
    tokki
        8
    tokki  
       2014-06-23 14:05:33 +08:00
    inline-block 略多坑 我本来用pure 后来都不用了
    yangg
        9
    yangg  
       2014-06-23 14:12:36 +08:00
    @lvwzhen 哦,谢谢,那在Chrome dev tools里,直接去掉font-size,你那个示例页面为什么只有最后一个.g-2会掉下来?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2780 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:27 · PVG 20:27 · LAX 05:27 · JFK 08:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.