流體網格，沒有舍入誤差和多列寬

Question

我已經看過所有髖關節，流體網格框架，它似乎不可能有一個流體網格使用百分比列寬（和ems for排水溝寬度），即3整數除以3，並且不會遭受可怕的舍入誤差。請看：

http://roestudios.com/code/12-columns.html

嘗試調整您的瀏覽器窗口，並注意周圍的事物如何反彈。大多數排水溝根本不排成行。這是因爲缺乏整潔的亞像素處理。當然，舍入因瀏覽器而異。

我所展示的例子基於12列網格，這是理想的，因爲12列網格允許頁面寬度的1/4和1/3的元素。

這就是爲什麼像The Golden Grid將無法​​正常工作：它不是被3整除

這是相當標準的有全寬「主」區域主頁和三個下面的「桶」。標準佈局。

但是，在嘗試構建「響應式網站」時，如果我希望元素像素完全對齊，看起來好像具有多個@media查詢的固定佈局可能是唯一真正的選擇。

編輯：很多，在Webkit中糟糕得多，但即使是Firefox也不會產生像素完美的結果。

Answer 1

您是否嘗試過CSS3 FlexBox？它在Firefox可惜還是有點神經質&無法在Chrome像素完美..

http://jsfiddle.net/lukem/gqsCV/3/

http://www.html5rocks.com/en/tutorials/flexbox/quick/