Как прижать кнопки вниз?

Question

[mipfikus]

Проблемная страница: mextra.segmenti.lv
Не могу разобраться.
Как эти кнопки прижать к низу блока?



Плохо знаком с CSS, в нём у меня не густо:

.woocommerce ul.products li.product {
   height: 500px;
}

.woocommerce ul.products li.product .button {
/* Как? */
}

Answer 1

[Арсений Матыцин]

Флекс → колонка карточке продукта.
Кнопке margin-top: auto. Во флексах это работает как индивидуальное «отталкивание»
элемента.

ЗЫ: делать из списка карточки это выстрел себе в ноги.

Comments

[mipfikus]

Можно с примером? Я же хлебушек

[Арсений Матыцин]

mipfikus, https://developer.mozilla.org/ru/docs/Web/CSS/CSS_... лови

[mipfikus]

Спасибо, это прогресс. Кнопки на одной высоте но выглядит это так:


Делал так:

.woocommerce ul.products li.product {
            height: 500px;
            display: flex;
            justify-content: space-between;
}
.woocommerce ul.products li.product .button {
            margin-top: auto
}

Как теперь дать товару нормальный вид (кнопку под товар)?

[mipfikus]

Выстрел в ноги делаю не я, так выводит плагин интернет магазина

[Арсений Матыцин]

mipfikus, двигаясь дальше по документации. Это все там есть.

[Арсений Матыцин]

mipfikus, в твоей власти переопределять шаблоны вывода. Это WP.

[mipfikus]

По итогу сделал так:

.woocommerce ul.products li.product {
   height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: space-between

}
.woocommerce ul.products li.product .button {
margin-top:auto;
}

Забавно, 5 часов назад пробовал также - не получилось. Сейчас пересмотрел, оказалось не было ;.

Спасибо!