Susy를 사용하여 동일한 세로 공간에서 왼쪽에 1 행, 오른쪽에 2 행을 배치하는 방법은 무엇입니까?

Question

어떻게 Susy에서 다음 레이아웃을 구현할 수 있습니까?

_________________________________ 
|    | Rt. Top  | 
|  Left  |________________| 
|    | Rt. Bottom | 
|______________|________________| 

과 그 반대의 :

_________________________________ 
| Lt. Top  |    | 
|________________| Right  | 
| Lt. Bottom |    | 
|________________|______________| 

는 지금까지 최고 다이어그램, 내가 시도 : 결과

#header { 
    #logo { @include span-columns(4, 12); } 
    #search { @include span-columns(8 omega,12); } 
    #menu { @include span-columns(8 omega,12); } 
    } 

    <header id="header"> 
    <div id='logo'>logo logo logo logo<br>logo logo logo logo<br>logo logo logo logo<br>logo logo logo logo<br>logo logo logo logo<br>logo logo logo logo</div> 
    <div id='search'>search search search<br>search search search<br>search search search<br>search search search<br>search search search<br>search search search</div> 
    <div id='menu'>menu menu menu<br>menu menu menu<br>menu menu menu<br>menu menu menu<br>menu menu menu<br>menu menu menu<br>menu menu menu<br>menu menu menu</div> 
    </header> 

:

_________________________________ 
|    |    | 
|  Left  |  Rt. Top | 
|______________|________________| 
       | Rt. Bottom | 
       |________________| 

Answer 1

가 밝혀 내 위의 예제가 제대로 작동했습니다. 나는 그 재치를 볼 수 없었습니다. h 샘플 텍스트. 나중에 참조 할 수 있도록 위의 두 가지 방법 모두에 적용됩니다. HTML div : bottom-left의 순서는 사이드 바 오른쪽에 표시되어야합니다.

<header id="header"> 
<div id='logo'>logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo logo</div> 
<div id='search'>search search search search search search search search search search search search search search search search search search</div> 
<div id='menu'>menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu</div> 

<div id='top-left'>top top top top top top top top top top top top top top top top top top top top top top top top</div> 
<div id='sidebar-right'>right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right</div> 
<div id='bottom-left'>bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom</div> </header> 

말대꾸 :

#header { 
#logo { @include span-columns(4, 12); } 
#search { @include span-columns(8 omega,12); } 
#menu { @include span-columns(8 omega,12); } 
#top-left { @include span-columns(8, 12); } 
#bottom-left { @include span-columns(8, 12); } 
#sidebar-right { @include span-columns(4 omega,12); } } 

, 당신은 시도 것을