Одинаковая высота блоков

[dron]

Добрый день.

Не так давно читал по align-item, благодаря которому можно выравнивать внутренние блоки. Вот сейчас столкнулся как раз с такой задачей, однако никак не могу это реализовать...

Задача: на странице категории товаров сделать блоки одинаковой высоты. Картинка тут: http://briggsstratton-parts.ru/height.jpg  А вот сам сайт

Однако, каким бы блокам я не задавал данный стиль, блоки товаров ровняться отказываются. А через height это делать ну никак не хочется (((

Прошу помощи у знатоков.

Огромное спасибо заранее.

[klierik]

Почитай про CSS Flex

[dron]

Так я же писал, что не получается.

Посмотрите код страницы. Там есть:

.comjshop_list_product, .row-fluid {
    align-items: stretch;
}

[Нарек]

Тобишь из за align-items: stretch; автоматически должен вписаться display: flex или что?

[dron]

Мне необходимо, чтобы блоки с товарами (фото, название, описание и кнопка Подробнее) были одной высоты. Как вот тут

[Нарек]

Так тебе же сказали про решение, CSS Flex.

То что у тебя там стоит (почему то) align-items: stretch; не делает контейнер флексом. Для того чтобы делать его флексом нужно задать ему display: flex

[dron]

Ок. Вот сейчас прописал:

.row-fluid {
    display: flex;
}
.block_product {
    align-items: stretch;
}

Но результата как не было, так и нет.

Edited August 1, 2017 by dron

[Евгений_SB]

надо так

  display:flex;
  justify-content: center;
  align-items: center;

 

все в одном стииле

[Xandrito]

Как-то так ...

Edited August 2, 2017 by Xandrito

[Svetlana_P]

Просто почитайте про использование флексбоксов, разберитесь с самого начала. Чтобы понимать, как это работает. Там всё просто.

А сейчас Вы пытаетесь использовать свойство align-item, которое не действует в отрыве от flex контейнеров.

Так то задумка правильная

[dron]

Огромное спасибо за помощь!!!
Но ни совет Евгения, ни код Xandrito не помогли.

Естественно, Светлана, я и сам пытаюсь разобраться, но не выходит. Дело в том, что это, как видите, магазин. И в движке много чего уже прописано. Возможно какие-то стили конфликтят, я в этом не особо силен. Пробовал разными способами адаптировать код Xandrito... Результат нулевый...

((

[klierik]

Всё работает отлично. Дело в том что ты не понимаешь своей проблемы и потому не можешь правильно сформулировать задачу.

Как было сказано выше используй CSS Flex: http://take.ms/hFcq4
Применив правила, указанный в скриншоте, высота всех блоков будет равна. Но, визуально они не будут равны, потому как содержимое блоков (контент) имеет разное наполнение (и высоту) — в этом, как раз, и проблема.

Картинка товара у тебя всегда будет одинакова, а вот описание и заголовок — нет. Есть несколько путей решения проблемы, но вёрстка в данном случае не подходящая, потому проще поиграться с высотой блоков.

Имя товара имеет высоту строки == 22px. Мы допускаем что имя может занимать как 2 строки так и одну, а значит мы можем резервировать место под него вот так: http://take.ms/Ql6VK

Далее у нас есть описание товара которое может занимать 1-2 строки так же — http://take.ms/Yd1xZ (54px потому что надо учесть по 5px).

Ну и так далее по образу и подобию подгоняй под себя.

[dron]

Прошу прощения, я правда не силен в этом вопрос...

Я писал в первом поте: "А через height это делать ну никак не хочется". Дело в том, что название товара и описание могут быть и в 1 и в 5-6 строк... Тут я не угадаю. Тем более шаблон адаптивный, под все разрешения подгонять - это не реально (((

Цитата

Применив правила, указанный в скриншоте, высота всех блоков будет равна. Но, визуально они не будут равны, потому как содержимое блоков (контент) имеет разное наполнение (и высоту) — в этом, как раз, и проблема.

А разве flex контейнеры как раз не это делают? Не выравнивают блоки с внутренними вложениями?

Edited August 2, 2017 by dron

[klierik]

35 minutes ago, dron said:

А разве flex контейнеры как раз не это делают? Не выравнивают блоки с внутренними вложениями?

флексы выравнивают блоки, но никак не содержимое. ИС в браузеры не вшивают, потому надо делать всё самому.

Тут требуется грамотно создать структуру html и описать css для неё. Все решабельно, но:

1 hour ago, klierik said:

Есть несколько путей решения проблемы, но вёрстка в данном случае не подходящая, потому проще поиграться с высотой блоков.

если у тебя есть доступ к изменению HTML, в таком случае читай про Flex: Практическое применение FlexBox

[dron]

Хм... В принципе html поковырять можно... Постараюсь найти.

Что тогда нужно будет сделать? Что удалить, что добавить?

[Xandrito]

Не соглашусь с klierik, флексами можно выравнивать содержимое, что хорошо видно в моем примере

Edited August 3, 2017 by Xandrito

[Xandrito]

Что нужно сделать конкретно в вашем случае (что-бы все встало ровно):

.jshop_list_product .row-fluid {
	display: flex;
	justify-content: flex-start;
}

.row-fluid .sblock3 {
    flex-basis: 33%;
    display: flex;
}

.block_product, .block_product .product {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.jshop_list_product .product .name {
	flex-grow: 1;
	text-align: center;
	font-size: 18px;
	margin-bottom: 5px;
}

 

Edited August 3, 2017 by Xandrito

[dron]

Xandrito, да, все сработало! Огромное спасибо!

НО, из-за этого пострадала адаптивность ((( См. скрин

Там Bootstrap в основе.

[Xandrito]

Тогда нужно добавить минимальную ширину для .sblock3

и перенос элементов (flex-wrap: wrap) в .row-fluid 

Но тут тогда встает другой вопрос, товар разбит на разные строки (не совсем понятно для чего) по три шт в ряд, не четное количество. То есть не получится такого размера при котором будет два товара в ряд в четном ряду ...

[dron]

А там 2 товара в ряду и не надо. Если более 768 - то 3 товара в строку, если менее - то 1 товар.

[dron]

Уважаемый, Xandrito, а можно попросить Вас мне в этом деле помочь? А я бы Вам на телефон денюшку кинул.

[Xandrito]

А ну тогда просто.

Добавьте для .row-fluid 

flex-wrap: wrap;

и для .sblock3 в медиазапроссе 

@media (max-width: 767px)

.row-fluid .sblock3 {

width: 100%;

}

поменяйте width: 100%; на min-width: 100%;

По сотрудничеству пишите в личку)