使用内嵌块或表格单元格为css网格

Question

我正在研究为仅webkit浏览器创建一组css网格类。应该是simillar blueprit/bootstrap /指南针，但我宁愿不使用这些，因为他们依靠浮动定位。

我想是这样的：

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

等。使用display会有什么好处：table-cell vs inline-block for this？还是有更好的方法？

Answer 1

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

DEMO

唯一真正的警告来的时候你在做手机浏览器中，并希望动态布局移（介质标签）从水平列表，进入一个垂直列表。我猜这是不是太大的协议添加你自己的媒体标签（并添加一个类到包装）...

你可能会得到display: inline-block工作，但请确保您使用box-sizing: border-box，因为当你在使用百分比，甚至一个px关闭和东西开始包装..