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

时间:2012-08-14 14:18:47

标签: css web-applications grid frontend

我正在研究为仅用于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为此?或者有更好的方法吗?

1 个答案:

答案 0 :(得分:3)

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

DEMO

当您使用移动浏览器并希望动态布局转换(媒体标签)从水平列表转到垂直列表时,唯一真实的警告就出现了。我想添加你自己的媒体标签(并在包装器中添加一个类)并不是一件大事......

你可能会display: inline-block工作,但请确保你使用box-sizing: border-box,因为当你使用百分比时,即使只有一个px关闭也会开始包装......