嵌套列正在失算？

我拼命試圖讓Susy嘲笑一個網站。我擔心我可能會錯過某些明顯的東西，但是當我在Susy網格中嵌套項目時，每個列的百分比寬度和邊距似乎略微超過，這樣它們累計超過100％並換行到下一行。在以下示例中，#main_headernav設置爲跨越12列中的8個，並且每個li應填充8列中的2列。每個L1具有計算樣式如下加起來超過100％，並導致最後一個項目來包裝嵌套列正在失算？

width: 22.58065%; 
float: left; 
margin-right: 3.22581%;

這是有問題的例子：

<header id="main_header"> 
    <img id="main_banner" src="images/test_banner.png" alt="Test"> 
    <nav id="main_headernav"> 
     <ul> 
      <li><a href="#about">About</a></li> 
      <li><a href="#blog">Blog</a></li> 
      <li><a href="#shop">Shop</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </nav>   
</header>

而且SASS：

$total-columns : 12;   
$column-width : 60px;   
$gutter-width : 20px; 
$grid-padding : $gutter-width; 

//Set border-box sizing - also alters SUSY grid math 
//@include border-box-sizing; 

// Main Container 
#main_container { 
    @include container; 
} 

#main_header { 
    @include span-columns(12 omega); 

    #main_banner { 
     @include span-columns(12 omega,12); 
    } 

    #main_headernav { 
     @include span-columns(8 omega,12); 

     li { 
      @include span-columns(2,8); 
     } 
    } 
}

來源

2012-09-23 Tom McPhail

這是我的環境。已經重新測試了一個非常基本的佈局，並得到相同的問題。如果使用span-columns創建的一系列列合計爲$ total-colums，則最後一列換行到下一行。 '紅寶石1.9.3p194（RVM）薩斯3.2.1（媒體馬克）羅盤0.12.2（參宿二）超對稱（1.0.1）' –

回答自己第n-ω混入的關鍵是去除後頁邊空白導致它包裹。衛生署！ –

好吧，所以我知道這將是我的問題:)

當然，有必要使用nth-omega mixin每隔4禮的孩子，以避免多餘的餘量，並防止包裝。

而且它只花了2小時盯着同一屏幕:)

來源

2012-09-23 20:40:01

嵌套列正在失算？

回答

相關問題