css - 对 css 网格使用 inline-block 或 table-cell

Question

我正在研究为仅限 webkit 的浏览器创建一组 css 网格类。应该类似于 blueprit/bootstrap/compass，但是我不想使用它们，因为它们依赖于 float 定位。

我想要这样的东西:

span-1 {width:10%;display:inline-block}
span-2 {width:20%;display:inline-block}

等等。为此使用 display:table-cell vs inline-block 会有什么好处吗？或者有更好的方法吗？

Answer 1

实际上 display: table 确实是您可能正在寻找的解决方案(因为您的目标浏览器)。它被添加到浏览器中，因此人们无需使用表格即可获得网格布局。您甚至不需要百分比(您添加的列数将决定子元素的宽度)。

DEMO

唯一真正需要注意的是，当您使用移动浏览器并希望动态布局转换(媒体标签)从水平列表变为垂直列表时。我想添加您自己的媒体标签(并向包装器添加一个类)并不是什么大不了的事情......

您可能会让 display: inline-block 正常工作，但请确保您使用 box-sizing: border-box 因为当您使用百分比时，即使是单个px 关闭，事情开始包装..