Susy Gallery ломает высоту для отображаемой таблицы и таблицы-ячейки

Я пытаюсь получить столбцы одинаковой высоты в моей адаптивной сетке, используя миксин галереи для SUSY. Для этого я установил контейнер «отображение: таблица» и столбец «отображение: таблица-ячейка». Это работает для меня, если я не использую миксин, но терпит неудачу, как только я включаю миксин. Миксин работает, если я установил высоту в пикселях, но не если я установил высоту, используя 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, но работает с отключенным миксином:

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

height gallery susy
person Tom Stermitz    schedule 12.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Миксин галереи использует плавающие элементы и поля для позиционирования элементов, которые не будут работать с отображением таблицы. Первый работает, потому что стили таблицы игнорируются, а элементы плавают с заданной высотой. Если вы хотите использовать стили таблицы для получения одинаковой высоты, вы должны исключить миксин галереи и вместо этого использовать отдельные миксины/функции для установки ширины/промежутков (я думаю, что только промежутки inside и inside-static будут работать с отображением таблицы).

.ttd {
    @include gutters;
    display: table-cell;
    background-color: #eee;
    width: span(3 of 12);
}
person Miriam Suzanne    schedule 15.12.2014
comment
Спасибо. Что помогает. Знаете ли вы, какой из других методов высоты будет работать? Мне нравится использовать Галерею, потому что она решает проблему усреднения пикселей. Семантически я создаю галерею, так что так удобнее. - person Tom Stermitz; 15.12.2014
comment
Нет хорошего метода для плавающих элементов одинаковой высоты, если только вы не хотите использовать JS, а gallery поддерживает только (изолированные) плавающие элементы на данный момент. Я начал использовать flexbox для галерей, а table-cell — хорошо поддерживаемая альтернатива. Любой из них должен позаботиться об округлении субпикселей, потому что элементы изгибаются, чтобы соответствовать своему контейнеру. Я не знаю лучшего варианта. - person Miriam Suzanne; 16.12.2014
comment
IE8 и IE9 не используют flexbox и все еще сопротивляются попыткам устаревания; согласно caniuse.com, они по-прежнему используются более чем на 3%. С другой стороны, я бы согласился с менее привлекательным макетом в IE8. - person Tom Stermitz; 18.12.2014
comment
Между тем, в моей нынешней ситуации элементы моей галереи имеют относительно постоянную высоту, поэтому я просто использую фиксированную высоту. - person Tom Stermitz; 18.12.2014