0

SUSY のギャラリー ミックスインを使用して、レスポンシブ グリッドで同じ高さの列を取得しようとしています。そのために、コンテナ「display: table」と列「display: table-cell」を設定しました。これは、ミックスインを使用しない場合はうまくいきますが、ミックスインをオンにするとすぐに失敗します。高さをピクセル単位で設定した場合、ミックスインは機能しますが、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%;
}
4

1 に答える 1

1

ギャラリー mixin はフロートとマージンを使用して要素を配置しますが、これはテーブル表示では機能しません。テーブルのスタイルが無視され、項目が設定された高さでフローティングされるため、最初のものは機能します。テーブル スタイルを使用して同じ高さを取得する場合は、ギャラリー ミックスインを除外し、代わりに個々のミックスイン/関数を使用して幅/ガターを設定する必要があります (ガターはテーブル表示でのみ機能すると思います) inside。inside-static

.ttd {
    @include gutters;
    display: table-cell;
    background-color: #eee;
    width: span(3 of 12);
}
于 2014-12-15T16:19:09.250 に答える