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

原来我上面的例子工作正常，我只是看不到带有示例文本。为了将来参考，这适用于上述两种情况。请注意HTML div的顺序：左下角必须出现在右侧栏右侧。

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

（每个ex。连接的底部2行代码;似乎是stackoverflow的行限制）

如何在同一垂直空间中使用Susy布局左边的1行和右边的2行？

1 个答案: