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

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

Григорий: js

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

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

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

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

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

Григорий: и куда его тыкать? О_о не понимаю. Вот нашел вариант с 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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