2013-04-16 1 views
1

저는 그리드 시스템으로 singularitygs를 사용하고 있으며 실제로 유연성을 좋아하지만 상당히 독특한 상황을 경험했습니다. 특이점이 또는 기타 그리드 시스템) 주소소스 순서에 관계없이 그리드의 전체 열 너비 행을 독립적으로 점프합니다.

나는 전체 열 너비에 걸쳐있는 행을 가지며, 이는 문서의 머리글 부분과 내용 부분을 나눕니다. 큰 레이아웃에서는 div.a 옆에있는 전체 열 막대 위에 위치하는 div.b 요소가 있습니다. 그러나 중간 크기의 레이아웃에서 그 요소는 전체 스팬 행 아래로 떨어집니다. 다음은 소스 순서와 원하는 출력이며, 단순화를 위해 10 열 레이아웃을 사용합니다.

소스 주문

div.a 
div.b 
div.c 
div.d 
div.e 
div.f 
div.g 
div.h 

대형 레이아웃 Large layout in grid

중간 레이아웃 그리드의 제작자 사전에 enter image description here

감사 ++ 어떤 도움과 시스템

답변

1

흥미로운 사용 사례. 솔직히 CSS 그리드 레이아웃이 나올 때까지는 꽤 어려울 것입니다. Singularity는 모든 주문을 수평 적으로 처리 할 수 ​​있지만 "D"및 "G"와 같은 세로 재정렬은 까다로울 수 있습니다. 이 일을하기 위해서 수레를 영리하게 사용할 수도 있지만, 그것은 아마도 순수한 Singularity 마법보다 더 많은 수작업을하게 될 것입니다.

+0

scott 입력에 감사드립니다. D an G 스태킹은 전체 열 범위 요소에 점프하는 것보다 문제가 적습니다. 그리드 레이아웃을 사용할 수있게되면 이것이 도움이 될 수 있다는 것에 동의합니다. 그리고 잠시 동안 그리드와 독립적으로 점프해야 할 행을 유지함으로써 해결할 수 있습니다. – Hache

+2

그런 경우 큰 레이아웃을 수행하는 방법에 대한 간단한 예제를 만들었습니다. http://codepen.io/scottkellum/pen/gCeaF - 세로로 쌓인 열을 결합합니다. 중형 레이아웃에는 수직 재구성이 훨씬 많기 때문에 시도하지 않았습니다. – scottkellum