height - Susy 画廊打破了显示表格和表格单元格的高度

Question

我正在尝试使用 SUSY 的图库混合在我的响应式网格上获得等高的列。为此，我设置了容器“display: table”和列“display: table-cell”。如果我不使用 mixin，这对我有用，但一旦打开 mixin 就会失败。如果我以像素为单位设置了高度，则 mixin 可以工作，但如果我使用 100% 设置高度则不能；

我在用着：

• 苏西（2.1.3）和
• 萨斯（〜> 3.3）

这适用于有或没有 SUSY：

   .ttable {
      @include container;
      padding: gutter();
     @include clearfix;
        .ttd {
            @include gallery(3 of 12);
        }
    }
    .ttable {
        display: table;
        height: 500px;
        border: 1px solid #BF0D3E;;
    }
    .ttd {
        display: table-cell;
        background-color: #eee;
        height: 500px;
    }

这不适用于 SUSY，但适用于关闭的 mixin：

.ttable {
    display: table;
    height: 100%;
    border: 1px solid $fuschia;
}
.ttd {
    display: table-cell;
    background-color: #eee;
    height: 100%;
}

Answer 1

Gallery mixin 使用浮动和边距来定位元素，这不适用于表格显示。第一个有效，因为表格样式被忽略，并且项目以设定的高度浮动。如果你想使用表格样式来获得等高，你应该省略画廊混合，并使用单独的混合/功能来设置宽度/排水沟（我认为只有inside和inside-static排水沟才能与表格显示一起使用）。

.ttd {
    @include gutters;
    display: table-cell;
    background-color: #eee;
    width: span(3 of 12);
}