使用內嵌塊或表格單元格爲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關閉和東西開始包裝..