-1

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

1 回答 1

0

原来我上面的例子工作正常，我只是在示例文本中看不到这一点。为了将来参考，这对上述两种情况都有效。注意 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 的行数限制）

于 2012-11-01T20:49:06.377 回答