Size: a a a

Верстка сайтов HTML/CSS/JS/PHP

2020 May 13

E

Eugene (\/)(o.o)(\/) in Верстка сайтов HTML/CSS/JS/PHP
Павел Куликов
Подскажите пожалуйста, как лучше выровнять товарную сетку.
Есть категории товаров, где названия длинные, в 3 строчки, а есть где в одну. Мне кажется лучший вариант сделать верстку сетки по типу таблицы, где одна высокая ячейка растягивает по высоте ВСЮ СТРОКУ, то при этом следующая строка может быть меньшей высоты. Только как такое можно реализовать современной версткой? Верстка таблицей table не подходит, не современно, да и количество столбцов товаров может быть разное в зависимости от ширины экрана. Надеюсь вопрос понятен, нужен совет куда копать)))
посмотри примеры с align-items: baseline
источник

E

Eugene (\/)(o.o)(\/) in Верстка сайтов HTML/CSS/JS/PHP
если я правильно понял
источник

RM

Roman Myshchyshyn in Верстка сайтов HTML/CSS/JS/PHP
Eugene (\/)(o.o)(\/)
нужно проект какой-то делать. сейчас в ютубе полно.
введи вёрстка лендинг пейдж. или проект на react/vue и перепечатывай за автором просто свой первый проект на новой технологии
хорошо
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
источник

RM

Roman Myshchyshyn in Верстка сайтов HTML/CSS/JS/PHP
спасибо
источник

С

Султан in Верстка сайтов HTML/CSS/JS/PHP
Павел Куликов
Они же являются флекс детьми?
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Султан
Они же являются флекс детьми?
Обычные дивы с float: left; width: 50%
источник

С

Султан in Верстка сайтов HTML/CSS/JS/PHP
Изучите flexbox
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Попробую
источник

С

Султан in Верстка сайтов HTML/CSS/JS/PHP
С этим это будет намного легче
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Спасибо. А без флекса нет вариантов? Пока обхожусь тем что знаю, хоть и знания мои устарели.
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Спасибо
источник

С

Султан in Верстка сайтов HTML/CSS/JS/PHP
Павел Куликов
Спасибо. А без флекса нет вариантов? Пока обхожусь тем что знаю, хоть и знания мои устарели.
С флоутами вам придется в дальнейшем прописывать костыли на js
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Султан
С флоутами вам придется в дальнейшем прописывать костыли на js
Тогда лучше флекс
источник

E

Eugene (\/)(o.o)(\/) in Верстка сайтов HTML/CSS/JS/PHP
Павел Куликов
Спасибо. А без флекса нет вариантов? Пока обхожусь тем что знаю, хоть и знания мои устарели.
если на старых технологиях, то можно задать блоку с товаром снизу паддинг в 50пх например. а кнопке дисплей абсолют. и боттом 0.
но флексы действительно всё очень сильно упрощают сейчас. и не только в этом примере, а вообще во всей современной вёрстке
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Изучу)
источник

ПК

Павел Куликов... in Верстка сайтов HTML/CSS/JS/PHP
Спасибо, ничего сложного, попробую
источник

RM

Roman Myshchyshyn in Верстка сайтов HTML/CSS/JS/PHP
Eugene (\/)(o.o)(\/)
если на старых технологиях, то можно задать блоку с товаром снизу паддинг в 50пх например. а кнопке дисплей абсолют. и боттом 0.
но флексы действительно всё очень сильно упрощают сейчас. и не только в этом примере, а вообще во всей современной вёрстке
что за флекс?
источник

RM

Roman Myshchyshyn in Верстка сайтов HTML/CSS/JS/PHP
flex пишеться?
источник

RM

Roman Myshchyshyn in Верстка сайтов HTML/CSS/JS/PHP
я б поискал
источник