중첩 된 열이 잘못 계산 되었습니까?

나는 Susy와 조롱 한 사이트를 필사적으로 얻으려고하고있다. 나는 명백한 무엇인가를 놓치고 있을지도 모른다라고 두려워한다. 그러나 나의 Susy 격자에서 항목을 겹쳐 쌓을 때 각 열의 퍼센트 폭과 마진이 100 %를 넘어서서 다음 줄로 감싸는 것처럼 약간 오버 슛하는 것처럼 보인다. 다음 예제에서 #main_headernav는 12 개의 열 중 8 개의 열에 설정되고 각 열은 8 개의 열 중 2 개의 열을 채워야합니다.중첩 된 열이 잘못 계산 되었습니까?

<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 : 100 % 이상까지 추가하고 마지막 항목이이

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

포장의 원인이되는 잘못된 예이다 아래와 같이 각 리는 계산 된 스타일이

좋아

$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 (알 니람) susy (1.0.1)' –

는 n 번째 오메가 믹스 인이 후행 마진을 제거하는 열쇠 나 자신이었다 답변 그것을 감싼다. 도! –

그래서 나는 내 문제 :)이 필요 물론

은 n 번째 오메가 믹스 인을 사용하는 것입니다 알고 있었다 불필요한 여백을 피하고 포장을 방지하기 위해 매 4 번째 아이에게.

그리고 같은 화면에서 2 시간 만 응시했습니다.

출처

2012-09-23 20:40:01

중첩 된 열이 잘못 계산 되었습니까?

답변

관련 문제