与Susy格 - 任何(?易)的方式来使“列”相同的高度?(Susy grid - any (eas

2019-06-27 04:08发布

让我的脚湿与Susy /上海社会科学院/ HAML等(使用调整后的中间人 - 与最新超对称从主分支)

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

。体背景为黑色...

现在,当主左含量比主右我看到右下方有一个黑色的方形大...什么办法可以作出这样的右下角#eee督察主权相同的高度(动态)作为主左 - 或有。主要背景的申请... ???

谢谢

彼得

PS有人与更多的学分应该在计算器一个与Susy标签...

Answer 1:

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

这将使两个div相互匹配,好像他们是相邻的表格单元格。 别担心,这不符合如使用表格来布局,它的凉爽为列,并且它没有引起我任何问题。 当然,低劣的旧的浏览器不支持它,但你可以使用一个.js脚本像ie9.js必要修补它。



文章来源: Susy grid - any (easy?) way to make 'columns' the same height?