浮動元素的寬度小於網格列

Question

我正在嘗試使用主容器和側邊欄執行奇異佈局。在主容器我想有浮動元素，將得到每3

換行符下面是相關要點清單： http://sassbin.beta.caliper.pl/gist/8704970/

不幸的是寬度（1）+寬（2）+寬度（3）！=寬度（主）。我究竟做錯了什麼？我必須使用網格物品1..N，因爲它們需要對齊網頁標題中的元素（未包含在要點中）。

Answer 1

因此，在用新鮮的頭腦接近主題後，我設法達到了預期的定位。

下面就爲大家來比較新的要點是： http://sassbin.beta.caliper.pl/gist/8900975/

這裏有一個需要改變的幾件事情：

1. 添加body { margin: 0 }對準@include background-grid()可視化與行爲。
2. 刪除所有邊框並將其替換爲背景以消除1px差異。
3. 使用@include layout()更改物料容器內部的網格以匹配集裝箱的網格跨度。
4. 風格項目nth-child和@include float-span()。
5. 爲連續的最後一項指定0​​以避免意外的換行符。

代碼的關鍵部分是：

 
#main { 
    @include grid-span(9,1); 
    background: yellow; 

    @include layout(9) { 
    .item { 
     &:nth-child(3n+2) { 
      @include float-span(3,1); 
      background: blue; 
     } 
     &:nth-child(3n+0) { 
      @include float-span(3,1); 
      background: red; 
     } 
     &:nth-child(3n+1) { 
      @include float-span(3,last); 
      background: green; 
     } 
    } 
    } 
}