singularitygs와 겹치는 블록 요소

Question

저는 singularity 그리드 시스템으로 첫 프로젝트를하고 있습니다. 지금까지 그것을 사랑하고 있습니다. 그러나, 나는 이상한 문제가있는 곳에서 내가 <h2>과 <h3> 요소가 겹쳐서 ... 정말로 문제가 무엇인지 알아내는 데 어려움을 겪고있다. class=intro와 <section> http://senseslabv3.brunomonteiro.mixture.io/

첫째 :

개발에 내 프로젝트에 사용할 수 있습니다.

누구에 대한 실마리가 있습니까? 시간 내 주셔서 감사합니다.

Answer 1

지우기 모두 대신 추한 <div style="clear: both;"></div>의 .tag h3 {clear: both;}

Answer 2

이 고려 어딘가에 그리드 스팬 믹스 인 이하를 선언 할 필요가있다 : 당신이 사용하는 경우,

.intro h2 { 
    @include pie-clearfix; } 

또는 toolkit :

.intro h2 { 
    @extend %clearfix-micro; } 

SASS 코드를 공유하면 문제가 해결 될 수 있습니다.

Answer 3

다른 사람들이 말했듯이, 당신은 당신의 수레를 제거해야합니다. 기본적으로 Singularity의 출력 스타일은 "분리"로 부동 소수점을 제거하는 방법에 대한 지식이 필요합니다 (clear: left, clear: right, clear: both, clear: none). 특이점은 명확하지 않으면 (clear: none) 그리드 항목이 올바르게 정리되지 않으면 겹칠 수 있음을 의미합니다. 이 작업은 격리 출력 방법에 대한 가장 일반적인 정신 모형을 준수하여 그리드의 불연속 점에 블록을 배치합니다. 수레를 지우면 항목을 여백 가장자리까지 지울 수 있습니다. 새 행을 만들면 가장 눈에 띄게 나타납니다. Mozilla Developer Network article on Clear을 참조하십시오.

참고로 lolmaus가 제안한 것과 같이 플로트를 지우고 clearfixing하는 것은 실제로 다른 일을합니다. 플로트를 지우면 여백 가장자리까지 항목이 지워지지만 항목을 지우면 모든 떠 다니는 하위 항목이 제대로 포함됩니다.

플로트 출력은 그리드 행을 가로 지르는 다른 정신 모형을 따르므로 자동으로 수레를 지 웁니다. Float 출력 스타일을 기본값으로 사용하려면 그리드를 호출하기 전에 $output: 'float'을 Sass 파일에 추가하기 만하면됩니다. 그러면 글로벌 출력 스타일 컨텍스트가 변경됩니다. 또는 float-span을 사용하여 Float 출력 스타일 정신 모델을 사용하고 grid-span 대신 요청시 출력하거나 $output-style: 'float'을 옵션으로 grid-span에 전달할 수 있습니다.

는 특이점에서 사용할 수있는 다른 출력 스타일과 옵션에 깊은 다이빙에 대한 Output Styles, Output Span, Float Span 및 Context Overrides in grid-span에 대한 설명서를 살펴 보자.

Answer 4

이것은 오래된 질문이지만 방금 문제가 발생했습니다. Snugug의 대답은 완벽하게 작동했지만 나에게 도움이되는 코드를 보여주고 싶었습니다.

// 주요 내용 컨테이너 콘텐츠 용기 내부

.l-main { 
    @include breakpoint(80em) { 
    @include grid-span(16, 3, 20); 
    } 
} 

// 전체 폭 배너 (댓글에 코드를 삽입 할 수 없습니다). 배너의 위와 아래에 여러 개의 다른 작은 기둥/격자가 있기 때문에 이것을 지울 필요가있었습니다.

.b-banner { 
    @include breakpoint(80em) { 
    @include float-span(16, 1, last); 
    } 
}