2014-06-17 4 views
1

오케이 - John Albin Wilkins http://palantir.net/blog/responsive-design-s-dirty-little-secret을 읽었으며 이제는 '격리'모드 (및 구현 방법)에 대한 동기를 이해합니다. 그는 '- http://snugug.com/musings/on-responsive-designs-dirty-little-secret격리 모드 - 새 행 지우기 및 만들기

나는 경우 생각에 라운드 (또는 적어도 그는 그것에 대한 동기 부여 이해)'을오고 말을 자신의 게시물을 업데이트 비록

난 후, 격리 모드의 샘의 초기 반박 읽기 Singularity가 Zen 그리드를 통해 제공하는 하나의 개선점은 출력 스타일을 혼합 할 수 있다는 것입니다 (예 : @import 레이아웃 믹스 인을 사용하여 레이아웃 중간에 출력을 플로트 (float) 출력으로 전환 할 수 있음).

그러나 격리 모드에서 - 나는 아직도 당신이 '행을 취소'방법에 대한 명확하지 않다 -

동안은이 기술 항목을 떴다 ... 존 알빈 윌킨스가 자신의 게시물에서 언급 한 바와 같이 할 수 없음 더 오랫동안 서로의 오른쪽 가장자리를 볼 수 있습니다, 그들은 여전히 ​​자신의 하단 가장자리를 볼 수 있습니다. 그리고 이전 그리드 아이템을 지우는 것만으로 새로운 그리드 아이템 행을 시작할 수 있다는 것을 의미합니다.이 새로운 행은 이전의 모든 컨텐츠 아래에 배치됩니다.

내가 섹션과 내부에 6 개의 기사가 있다고 가정 해 보겠습니다. 모든 기사가 섹션의 2 개 열 그리드의 1 개 열을 차지하기를 원합니다. 나는이 발생하는 부동 소수점 출력에 '없는 자연', 샘은 자신의 게시물에에 래치와,와 함께 둘과 포스트 정확하게 설명 고백하지만

grid-span(1,1) 
grid-span(1,2) 
/* next row */ 
grid-span(1,1) 
grid-span(1,2) 
/* next row */ 
grid-span(1,1) 
grid-span(1,2) 

은 어쩌면 내가, 행 청산에 조금 집착 해요 Clearfix 컨테이너를 사용하지 않고 격리 모드에서 행을 지우는 방법은 내 호기심을 자극합니다.

답변

2

행을 지우려면 행의 첫 번째 항목에 clear: both을 사용하십시오.

.foo 
    +grid-span(1, 1) 

.bar 
    +grid-span(1, 2) 

.baz 
    +grid-span(1, 1) 
    clear: both 

.quux 
    +grid-span(1, 2) 

이 청산에 대한 자세한 배경 정보의 경우,이 대답 읽기 : 당신이 스팬 믹스 인 후 clear: both을 적용 할 수 있도록 특이점 분리 스팬 믹스 인이 clear: right을 적용

Layout using Singularity

+0

가 알았어요을 - 그것은 작동하고, 다시 감사합니다. 나는 Singularity ;-)를 좋아하기 시작했습니다. –