떠 다니는 요소의 너비가 격자 열보다 작습니다.

Question

주 컨테이너와 사이드 바를 사용하여 Singularity 레이아웃을 수행하려고합니다. 주요 컨테이너에서 내가 여기에 관련 요지의 각 3

에서 줄 바꿈을 얻을 것이다 떠 요소의 목록이 싶습니다 http://sassbin.beta.caliper.pl/gist/8704970/

불행하게도 폭 (1) + 폭 (2) + 너비 (3)! = 너비 (주). 내가 도대체 ​​뭘 잘못하고있는 겁니까? 항목 머리글 (요점에 포함되지 않음)의 요소를 정렬해야하기 때문에 항목 1..N에 대한 눈금을 사용해야합니다.

Answer 1

신선한 마음으로 주제에 접근 한 후 예상되는 포지셔닝을 얻을 수있었습니다.

은 여기 모두가 비교하기위한 새로운 요점입니다 : http://sassbin.beta.caliper.pl/gist/8900975/

이 변경 필요한 몇 가지가 여기서

1. 행위로 @include background-grid() 시각화를 정렬 body { margin: 0 }를 추가합니다.
2. 모든 테두리를 제거하고 배경으로 바꿔서 1 픽셀 차이를 없앱니다.
3. 컨테이너의 그리드 범위와 일치하도록 @include layout()으로 항목 컨테이너 내부의 그리드를 변경하십시오.
4. 스타일 항목은 nth-child이고 @은 float-span()입니다.
5. 예기치 않은 줄 바꿈을 피하기 위해 행의 마지막 항목에 last을 지정하십시오.

코드의 중요한 부분은 다음과 같습니다

 
#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; 
     } 
    } 
    } 
}