CrashTestPWNZ

Пользователь

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

CrashTestPWNZ

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

img

У меня задание сверстать то что на картинке. Меня интересует как бы опытный верстальщик реализовал мелкие карточки. Кто сможет, распишите пожалуйста структуру, как бы вы все организовали и тд., так как я когда делал, то половину элементов позиционировал через позишн абсолют.

 

https://ibb.co/wgDQb5c

ggbb

Пользователь

Регистрация: 04.11.2011

Сообщения: 2125

Рейтинг: 1563

ggbb

Регистрация: 04.11.2011

Сообщения: 2125

Рейтинг: 1563

CrashTestPWNZ сказал(а):

У меня задание сверстать то что на картинке. Меня интересует как бы опытный верстальщик реализовал мелкие карточки. Кто сможет, распишите пожалуйста структуру, как бы вы все организовали и тд., так как я когда делал, то половину элементов позиционировал через позишн абсолют.

 

https://ibb.co/wgDQb5c

Нажмите, чтобы раскрыть...

inline-block?

CrashTestPWNZ

Пользователь

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

CrashTestPWNZ

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

img
ggbb сказал(а):

inline-block?

Нажмите, чтобы раскрыть...

так и делал сначала, но оно все ехало, хотя ширины всем хватало oups.gif

lexani4321

Пользователь

Регистрация: 28.03.2018

Сообщения: 13019

Рейтинг: 4063

lexani4321

Регистрация: 28.03.2018

Сообщения: 13019

Рейтинг: 4063

display: inline-block

 

CrashTestPWNZ сказал(а):

так и делал сначала, но оно все ехало, хотя ширины всем хватало oups.gif

Нажмите, чтобы раскрыть...

Попробуй просто display: inline

И float: left надеюсь писал ж?

HiThere

Пользователь

Регистрация: 24.06.2016

Сообщения: 3470

Рейтинг: 2602

HiThere

Регистрация: 24.06.2016

Сообщения: 3470

Рейтинг: 2602

Далеко не сильный верстальщик (хотя и работаю фронтендером), но мне кажется тут не нужно пихать позицию абсолют

Делаешь 2 колонки, 1 для большого блока, вторую для маленьких, колонку для маленьких еще раз делишь на 2, как то так

CrashTestPWNZ

Пользователь

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

CrashTestPWNZ

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

img
kosras сказал(а):

Делаешь header с position fixed, картинки с товарами засовываешь в один grid контейнер и разбиваешь его на 3 колонны.

Там где Guest это обычный row, ничего такого. Tab'ы тоже типичные.

Нажмите, чтобы раскрыть...

со всем я уже разобрался, интересует только структура внутри мелких блоков

ggbb

Пользователь

Регистрация: 04.11.2011

Сообщения: 2125

Рейтинг: 1563

ggbb

Регистрация: 04.11.2011

Сообщения: 2125

Рейтинг: 1563

CrashTestPWNZ сказал(а):

так и делал сначала, но оно все ехало, хотя ширины всем хватало oups.gif

Нажмите, чтобы раскрыть...

Эт норма, если рак типо меня - подпирай костылями. А по сути сверхразум нашел бы страницу эту на амазоне и код элемента прост глянул бэ)

CrashTestPWNZ

Пользователь

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

CrashTestPWNZ

Регистрация: 29.12.2015

Сообщения: 829

Рейтинг: 184

img
lexani4321 сказал(а):

display: inline-block

 

Попробуй просто display: inline

И float: left надеюсь писал ж?

Нажмите, чтобы раскрыть...

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

HiThere

Пользователь

Регистрация: 24.06.2016

Сообщения: 3470

Рейтинг: 2602

HiThere

Регистрация: 24.06.2016

Сообщения: 3470

Рейтинг: 2602

Спойлер: "Код пен"

https://codepen.io/anon/pen/bJjpgV

Хз на быструю руку накидал

Fregat

Пользователь

Регистрация: 18.06.2013

Сообщения: 108

Рейтинг: 62

Fregat

Регистрация: 18.06.2013

Сообщения: 108

Рейтинг: 62

Есть фреймворк bootstrap, идеально подходит для колонок

Если руками делать - давно пора переходить на flexbox. Задачка простая, гулгится.

Сейчас есть ещё развивающийся css grid layout, но пока поддерживается браузерами плохо, так что аккуратнее с этим

 

P.S. Очень грубо накидал разбиение по колонкам: http://prntscr.com/nf5lvs. Остаётся только реализовать сами колонки в коде, варианты реализации написал выше.

gogolik

Пользователь

Регистрация: 16.11.2013

Сообщения: 1543

Рейтинг: 433

gogolik

Регистрация: 16.11.2013

Сообщения: 1543

Рейтинг: 433

img

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

 

https://codepen.io/anon/pen/ROBaYw

aQuere

Пользователь

Регистрация: 19.07.2016

Сообщения: 4718

Рейтинг: 1120

Нарушения: 20

aQuere

Регистрация: 19.07.2016

Сообщения: 4718

Рейтинг: 1120

Нарушения: 20

Я бы флексами сделал