-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 の順序に注意してください。左下は右サイドバーの後に配置する必要があります。

  <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. concatenated の下部 2 行のコード。stackoverflow の行制限のようです)

于 2012-11-01T20:49:06.377 に答える