Jump to content

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


dron
 Share

Recommended Posts

Добрый день.

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

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

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

((

Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

Цитата

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

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

Edited by dron
Link to comment
Share on other sites

35 minutes ago, dron said:

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

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

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

1 hour ago, klierik said:

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

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

Link to comment
Share on other sites

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

.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 by Xandrito
  • Like 1
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

flex-wrap: wrap;

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

@media (max-width: 767px)

.row-fluid .sblock3 {

width: 100%;

}

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy