基于 inline-block 的栅格系统

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3805 天前的主题，其中的信息可能已经有所发展或是发生改变。

根据一丝的「inline-block 前世今生」写了个栅格系统。

https://github.com/lvwzhen/IBG

9 条回复 • 2014-06-23 14:12:36 +08:00

yangg

2014-06-23 11:51:58 +08:00

lz能不能说说两个inline-block之前的换行空白是怎么搞掉的？

zencoding

2014-06-23 11:54:57 +08:00

个人觉得 stage.purecss.io 的栅格更舒服

NemoAlex

2014-06-23 11:56:42 +08:00

@yangg lz 的代码里是 font-size:0;

yangg

2014-06-23 12:00:52 +08:00

@NemoAlex 看到了，原来是和 letter-spacing 一起才起作用的

弱弱的问下， letter-spacing: 5px 中这个5px是怎么来的是？ font-size为0时，间距总是5？

lvwzhen

2014-06-23 12:07:47 +08:00

@yangg 一丝的「inline-block 前世今生」有详细讲解，可以看一下。
letter-spacing:-5px;是为了修复 Safari 等不支持字体大小为 0 的浏览器的 hack 。
http://ued.taobao.org/blog/2012/08/inline-block/

lvwzhen

2014-06-23 12:10:06 +08:00

@zencoding Pure中是也 inline-block 的栅格，同样是使用letter-spacing和word-spacing消除空白的。

jsonline

2014-06-23 13:29:09 +08:00 via Android

这样 hack 总觉得不好。

tokki

2014-06-23 14:05:33 +08:00

inline-block 略多坑我本来用pure 后来都不用了

yangg

2014-06-23 14:12:36 +08:00

@lvwzhen 哦，谢谢，那在Chrome dev tools里，直接去掉font-size，你那个示例页面为什么只有最后一个.g-2会掉下来？