对css网格使用内联块或表格单元

Question

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

我想要这样的东西：

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，也会开始包装。