Susy Gallery Center, последний ряд

Использование Susy 2 и попытка центрировать последнюю строку в susy галерее. Интересно, что у меня есть только нечетное количество логотипов, которые нужно отобразить. 15 всего. Я попытался просто поместить последние 3 в отдельный div и возиться с этим, но похоже, что я добавляю больше ненужного кода. Любые идеи? Спасибо заранее!

Вот миксин, который я нашел здесь некоторое время назад для замены функции nth-omega, исключенной из Susy 1:

@mixin nth-last($n, $type: child) {
&:nth-#{$type}(#{$n}) {
    @include last;
   }
}

Я попытался просто сначала сделать span cols

.partner {
   @include span(3 of 12);
   @include nth-last(4);   
}

затем использовал галерею

.partner {
   @include gallery(3);

}

Вот HTML

<div class="logos">
     <div class="partner"><img src="images/partners/envestnet.jpg"/></div>
     <div class="partner"><img src="images/partners/guggenheim.jpg"/></div>
     <div class="partner"><img src="images/partners/usbancorp.jpg"/></div>
     <div class="partner"><img src="images/partners/advent.jpg"/></div>
     <div class="partner"><img src="images/partners/charles-schwab.jpg"/></div>
     <div class="partner"><img src="images/partners/bloomberg.jpg"/></div>
     <div class="partner"><img src="images/partners/stifel.jpg"/></div>
     <div class="partner"><img src="images/partners/pershing.jpg"/></div>
     <div class="partner"><img src="images/partners/credit-suisse.jpg"/></div>
     <div class="partner"><img src="images/partners/fidelity.jpg"/></div>
     <div class="partner"><img src="images/partners/sp.jpg"/></div>
     <div class="partner"><img src="images/partners/ultimus.jpg"/></div>
     <div class="partner"><img src="images/partners/hsg.jpg"/></div>
     <div class="partner"><img src="images/partners/deutsche-bank.jpg"/></div>
     <div class="partner"><img src="images/partners/interactive-brokers.jpg"/></div>
</div>

susy
person lnickel    schedule 19.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Нет хорошего способа центрирования с поплавками, поэтому вам нужно будет использовать другую технику все вместе — либо в полном списке, либо в последних трех. Я предпочитаю использовать flexbox, но это исключает некоторые старые браузеры. Другим вариантом может быть использование встроенного блока, но это сопряжено со своими проблемами. В любом случае, Susy-примеси не сделают это за вас, но вы можете использовать функции Susy (span и gutter), чтобы выровнять себя по сетке:

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partner {
  width: span(3 of 12);
  margin-right: gutter(12);

  &:nth-child(4n),
  &:last-child {
    margin-right: 0;
  }
}
person Miriam Suzanne    schedule 20.10.2015
comment
Хорошо, увидев ваше предложение, я просто согласился.... @include span(3 of 12); поле слева: желоб (3); - person lnickel; 21.10.2015
comment
Этот margin-left: gutter(3) в основном дает вам произвольное число. Вы просите Сюзи дать вам ширину желоба, как будто вы находитесь в контексте 3, а это не так. Вы действительно хотите вставить его в полторы колонки (в контексте 12). Это может сработать, но в этом случае Susy делает ваш код менее понятным. - person Miriam Suzanne; 22.10.2015
comment
Спасибо за это объяснение! - person lnickel; 16.11.2015

arrow_upward
0
arrow_downward

Сегодня наткнулся на ответ и не смог использовать flexbox по нескольким причинам. Мои решения с @gallery работают хорошо. Я даже смог сбросить ранее созданное центрирование, которое кажется необходимым, если вы настраиваете размеры галереи в медиа-запросах.

ПРИМЕЧАНИЕ: я использую @breakpoint в следующем примере:

article {
    @include breakpoint($medium-up) {
        @include gallery(6 of 12);

        &:last-child:nth-last-child(2n + 1) {
            background-color: red;
            margin-left: auto;
            margin-right: auto;
            float: none;
        }
    }

    @include breakpoint($large-up) {
        @include gallery(4 of 12);

        &:last-child:nth-last-child(2n + 1) {
            background-color: green;
            margin-left: get-span-width(8 of 12 wide);
            margin-right: -100%;
            float: left;
        }
    }
}

У меня были некоторые проблемы с выяснением того, как я могу пересчитать заданное смещение, и после копания в функции gallery() -> get-isolation() -> get-span-width() самого susy я смог найти его здесь.

ИЗМЕНИТЬ:

Я также нашел это статья и codepen, которые тоже могут помочь.

person Jörn    schedule 24.10.2017