1

Susy/sass/haml などで足を濡らします (調整された仲介者を使用 - マスター ブランチの最新の susy を使用)

これを grid.css.scss に入れます

@import 'susy';

$total-columns  : 8;
$column-width   : 4em;
$gutter-width   : 0em;
$grid-padding   : $gutter-width;

$break-max      : 12;

$container-style: magic;

// Container
.page {
  @include container($total-columns, $break-max);
}

// Layout

.header {
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

.pagenav {
  clear: both;
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

.main {
  clear: both; 
  .main-left {  
    @include span-columns($total-columns omega);
    @include at-breakpoint(10) {
      @include span-columns(7);  
    } 
  }
  .main-right {  
    @include span-columns($total-columns omega);  
    @include at-breakpoint(10) {
      @include span-columns(3 omega);  
    }        
  }
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

.footer {
  clear: both;
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

このスニペットは site.css.scss からのものです

.main {
  background-color: #eee;
}

.main-left {
  background-color: #fff;
}

.main-right {
  background-color: #eee;
}

.ボディの背景は黒です...

main-left のコンテンツが main-right よりも大きい場合、右下に黒い四角が表示されます... 右下に #eee iow main-right を main-left と同じ高さ (動的) にする方法はありますか?または適用する .main 背景があります...???

ありがとう

ピーター

PSもっとクレジットのある人は、stackoverflowでSusyタグを作成する必要があります...

4

1 に答える 1

4 
#main {
  display: table;
  background-color: #eee;
}
.main-left,
.main-right{
  display: table-cell;
  vertical-align: top;
}
.main-left {
  background-color: #fff;
}

.main-right {
  background-color: #eee;
}

これにより、2 つの div が隣接するテーブル セルであるかのように互いに一致します。心配する必要はありません。これは、レイアウトにテーブルを使用することにはなりません。列にはクールで、問題はありません。もちろん、クソ古いブラウザーはサポートしていませんが、必要に応じてie9.jsのような .js スクリプトを使用してパッチを当てることができます。

于 2012-08-20T16:14:29.730 に答える