Разлазятся по высоте карточки товара?

Question

[Super Star]

Здравствуйте. Не получается сделать так чтобы карточки товара были одинакового размера: https://jsfiddle.net/2b1Ldsyp/
Я так понимаю это из-за того что количество текста внутри разное. Как сделать так чтобы карточки были одинаковой высоты и промежутки между ними были одинаковые.

Answer 1

[Super Star]

Нашел решение с помощью display: inline-block.
Нужно было сделать так:

.wrapper li{
display: inline-block;
vertical-align: middle;
margin: 10px 5px;
}


После того как я добавил vertical-align: middle; у меня блоки в которых больше текста стали вести себя как нужно и всё выровнялось. Думаю если добавить EqualHeight.js-master то будет еще лучше, но это не является моей целью. Вот конечный результат https://jsfiddle.net/zuhkLtfd/ Всем спасибо =)

Comments

[Григорий]

а если текста будет совсем много? или такой сценарий невозможен?

[Григорий]

https://jsfiddle.net/pzc0avfh/ вот так

[Super Star]

Григорий: Не думаю что такой сценарий возможен, но если припечёт то тогда исспользовать EqualHeight.js или вот так мутить webformyself.com/otzyvchivye-bloki-odinakovoj-vyso... В данный момент я получил что хотел, а там хоть трава не рости

Answer 2

[DTX]

display: flex;
align-items: stretch;

frontender.info/a-guide-to-flexbox/#codealignitemscode

https://jsfiddle.net/2b1Ldsyp/3/

Comments

[Григорий]

а для эксплорера как сделать, который flex не понимает?

[DTX]

Григорий: js

[DTX]

Но лучше сжечь его на костре

[Super Star]

Я отмёл этот вариант по той же причине что и человек задавший вопрос выше. https://jsfiddle.net/ebqo9bsb/ с помощью flex-box легко сделать такое, но вот как сделать так чтобы было кроссбраузерно. Дело в том что если я li-шику ставлю displau-bloc то я могу тогда добавить text-align:center и при уменьшении размера экрана блоки будут по середине, а если сделать с помощью float то у меня не выходит сделать так чтобы блоки выравнивались по центру

[Super Star]

DTX: меня? за что?

[Григорий]

Андрей Рысь: видимо все же explorer)

[Григорий]

Андрей Рысь: как вариант min-height?

[Super Star]

Григорий: и куда его тыкать? О_о не понимаю. Вот нашел вариант с display: inline-block; codepen.io/anon/pen/rqCEc

[Григорий]

Андрей Рысь: .wrapper li {display: block;
float: left;}
.item {
display: block;
max-width: 302px;
height: 100%;
border: 1px solid #E8E8E8;
background-color: #F7F7F7;
margin-bottom: 20px;
min-height: 450px;
}

но это не решает вопроса если текста будет сильно больше

[DTX]

Андрей Рысь: вот только кнопок снизу там нет
i.imgur.com/YdnEjGC.png

[DTX]

Андрей Рысь: А flexbox поддерживают 97% браузеров:
caniuse.com/#search=flex
Не вижу смысл городить огород из-за такой несуразности, как IE

[Григорий]

DTX: explorer 9 (стандартный для win 7) flexbox не понимает к примеру

[DTX]

Григорий: IE 9. Browser Usage: 0.37%

[Kovalsky]

Андрей Рысь: то, что вы хотите, можно сделать адаптивно и кроссбраузерно до IE7 только с помощью JS. Мне такое дерьмо как раз неделю назад пришлось писать) Получился локальный treeWalker, за первый проход собирающий высоты блоков и дочерних блоков, считающий максимум в зависимости от количества колонок, за второй проход раздающий высоты.

И я хочу сказать, что оно того не стоило) Работает, конечно, но довольно монструозно.

[Super Star]

Никита Полевой: О_О я как бы по js & jq только основы изучил. Прошел курсы. максимум только менюшку заадаптивил. Можно по подробнее как это можно сделать? А то я не догоняю

[Kovalsky]

Андрей Рысь: в каком смысле как? Сам алгоритм? Он же довольно прозрачный... ну ладно, если вам интересно, то по ресайзу 1) обновляем количество колонок, 2) в каждом ряду ищем элемент с максимальной высотой, выставляем эту высоту остальным элементам в ряду.

[Super Star]

Никита Полевой: О_О О_О О_О XD

[Kovalsky]

Андрей Рысь: Чего? Это возможный минимум действий, мне кажется. Этот equal-heights.js производит их намного большее количество, ну и он конечно же надежней.

[Super Star]

Никита Полевой: Мне практика нужна. Я не могу себе самостоятельно поставить задачу чтобы что-то написать на js or jq. Я понятия не имею с какими задачами встречается junior frontend developer. Денег у меня нет что бы кому-то заплатить(я сейчас безработный). Я изучил курсы по js & jq от ITVDN, Попова и так же закрепил на learn.javascript.ru, но без практики это ничто. Я спрашивал на тостере и на ru.stackoverflow.com в плане (какие задачи решает junior frontend developer по js & jq) в итоге всё что мне посоветовали помогать тем кто задаёт вопросы на этих площадках, но это смешно. Я сам только основы прошел. В общем я не нашел того который мне просто давал бы задачи. задачи которые выполняет джун. Печально =(

[Kovalsky]

Андрей Рысь: не то чтобы я какой-то крутой разработчик сейчас, но ваши слова я вполне мог бы сам сказать около года назад. Вам правильно посоветовали - если у вас нету никакого интереса к предмету, вам остается только ловить крохи знаний, случайно попадающие в ваше поле зрения.

Под интересом я подразумеваю тот внутренний огонь, который разжигает желание действовать и экспериментировать. Например год назад я вряд ли чем-то отличался от вас - у меня было много теории и совсем не было практики. С тех пор я сделал:

1. yaTranslate.js - скрипт, асинхронно переводящий текст страницы через API Яндекса,
2. Лёгкий веб-сервер на node.js,
3. $-плагин, добавляющий крутой адаптивный кроссбраузерный слайдер,
4. Аналог async'а для node.js,
5. Bookmarklet generator,
6. Простую библиотеку для работы с геометрическими объектами,
7. Простой, но очень красивый и вообще приятный script-loader.js, контролирующий загрузку скриптов на странице,

Ну и скорее всего много других вещей, которые наверное можно было бы выделить в отдельные сущности и адаптировать для использования в других средах. Ах да, еще огромное количество плюшек и инструментов, которыми я пользуюсь как в браузере, так и по остальным нуждам: юзерскрипты, букмарклеты, просто полезные функции, инструменты под node.js. Часть из этого - пустышки, имеющие смысл только как учебные пособия, частью я пользуюсь в работе ежедневно.

Если что-то из этого вы считаете достойным, то будьте уверены - это я писал только потому что мне было интересно. Большинство скриптов вообще были написаны только потому что "Иисус, как же мне нравится нода и весь этот ES6" или "меня возбуждает одно упоминание о DOMSubtreeModified".

Нужна практика - практикуйтесь. Как не можете задачи ставить? Вы в своем вопросе поставили задачу - сделать скрипт, который бы... в общем решающий ту проблему, которую вы описали в вопросе.

Answer 3

[mletov]

"Разлазятся" - это 5!
А посути вопроса: cымитировать таблицу через display: table и display:table-cell
Но если адаптив, то, конечно, не вариант

Comments

[Super Star]

Ну конечно это не вариант мы же живём в век смартфонов и планшетов. Нужен адаптив

[mletov]

Ну тогда как и советовали flexbox + js
webformyself.com/otzyvchivye-bloki-odinakovoj-vyso...

[Super Star]

О_О а кросбраузерность?

Answer 4

[Алексей Бульба]

Почитав ответы и комментарии.
Можно решить плагином EqualHeight.js-master, если уже подключен jquery к сайту.
Он автоматически увеличивает высоту блоком, чтобы были одинаковыми.

Comments

[Super Star]

Знаю я про него. А с помощью display: inline-block Решить не получится?

[Super Star]

Если исспользовать float то блоки прижмутся соответственно к левому краю и по центру не станут

[Super Star]

А если я использую display: inline-block то блоки у которых больше текста лезут в верх

[Super Star]

Если я для ul ставлю text-align: center; когда когда для li установлено float: left то блоки не выравниваются по середине блока, а с display: inline-block выравниваются, но блоки у которых больше текста лезут в верх

[Алексей Бульба]

Андрей Рысь: li должны быть прижаты друг к другу по середине или на одинаковых расстояниях ?

[Super Star]

Алексей Бульба: промежуток должен быть. В начале 3ряда item-ов, затем 2-а ряда item-мов и эти 2-а item-ма должны быть по центру, а не прижаты к левому краю. Последний item тоже должен быть по центу

[Алексей Бульба]

Андрей Рысь: Имел ввиду такое расположение по центру. ( uploads.ru/rFQlB.png )

[Super Star]

Алексей Бульба: я понял. слишком широко. Хотелось чтобы расстояние было не более 20 px между ними

Answer 5

[cryolite]

Как уже советовали выше display:flex, а еще можно для .wrapper li добавить vertical-align:top - тогда хвост будет внизу карточки и картинки будут на одном уровне. Если flex не будет работать, то inline-block в любом случае останется.

Answer 6

[entermix]

Используйте jquery.matchHeight.js