如何使用 Susy 在相同的垂直空间中布局左侧 1 行和右侧 2 行？答案

【问题标题】：How to layout 1 row on left and 2 rows on right, in same vertical space, with Susy?如何使用 Susy 在相同的垂直空间中布局左侧 1 行和右侧 2 行？
【发布时间】：2012-11-02 04:49:06
【问题描述】：

如何在 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   |
               |________________|

【问题讨论】：

你能发布你尝试过的东西吗？
使用 Sass 和 HTML 编辑了初始帖子。

标签： susy-compass

【解决方案1】：

事实证明，我上面的示例运行良好，只是在示例文本中看不到这一点。为了将来参考，这对上述两种情况都有效。注意 HTML div 的顺序：bottom-left 必须出现在 sidebar-right 之后。

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

（每个示例中的底部 2 行代码连接在一起；似乎是 stackoverflow 的行数限制）

【讨论】：