無法獲取基於Susy的網格來正確對齊

我一直在嘗試Susy插件的Compass（SASS），但我注意到它沒有按照我的意圖工作。無法獲取基於Susy的網格來正確對齊

我拿了index.html和screen.scss從official Susy tutorial，編譯SCSS並把它放在my server。正如你可以看到它看起來就像它應該（在所有瀏覽器我測試）：

enter image description here

我做下一個什麼是以下幾點：

複製<article>在<div role="main">並將其粘貼六次
在screen.scss，相應地更改列跨度（div[role="main"] > article）：從@include columns(6,9);到@include columns(1,9);

但是現在這些新元素根本不與網格對齊，它們被一個清晰可見的空間關閉。我在FF，Safari和Chrome的最新版本中對此進行了測試，只有FF才能正確顯示它。截圖是瀏覽器：

enter image description here

我也上載源爲大家檢查here。

這是Susy的一個普遍問題，網格不正確或者我做錯了什麼？如果第一個，是否有人知道解決方法？我也試過百分比和像素，但都沒有工作。

來源

2012-02-13 Louis B.

蘇西不只是像所有其他網格系統一樣。它旨在實現一個非常特定的目的：網格是fluid on the inside。您用於創建網格的單位應用於容器，而不是每個列。裏面的一切都是用百分比構建的。你看到的是正常的。所有的流體網格都是如此，因爲sub-pixel rounding。這不是一個錯誤，它是構建響應式網站的一部分。

如果你需要像素精確的網格，Susy是你的錯誤工具。這一切都取決於你想要建立的。

重新調整瀏覽器的大小以查看它是如何工作的。您會注意到網格捕捉並浮動在其指南的幾個像素內，但網格保持不變，並且從不觸發水平滾動條。

乾杯！

-e

來源

2012-02-14 07:20:53

（在你的情況下，更多的時候，你向下取整相同的子像素數學，更多的「關」網格會顯得你的演示需要瀏覽器的單像素的偏差，並乘以直到它明顯。） – 2012-02-14 07:27:45

感謝您的解釋和解釋行爲的鏈接。我不需要像素精確定位，但我仍然不確定一件事情：假設我在第6列開始處有一個低於6的'

'的容器，並且一直延伸到右側。我將如何確保它在左側與最後一個「文章」正確對齊？或者這是不可能的，我應該相應地改變我的設計？ – 2012-02-14 08:51:06

那裏沒有簡單的答案。這一切都取決於設置。如果兩者都是'歐米茄'列，並且將'$ omega-float'設置爲右側，則可以通過使它們從另一側進行測量來使它們排列（因此它們不受乘法舍入的影響。 – 2012-02-14 17:36:24

無法獲取基於Susy的網格來正確對齊

回答

相關問題