@TeslaGogol

Как правильно сверстать эти элементы?

Я бы мог просто все абсолютно спозиционировать и поставить их на места, но там геморно будет с адаптивом. Пробовал сделать на svg, не знаю как изменять внешний вид активного 'таба'.
Кто-то делал что-то подобное? Есть идеи по реализации?
5be1b198bc943233593199.png
  • Вопрос задан
  • 375 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Не мудрите. Пилите на абсолютах. Размеры и позиции выставляйте в процентах. Плюс пара медиазапросов, чтобы перераспределить блоки на мелких экранах.

А вообще-то можно и обычным потоком реализовать, практически без позиционирования. Присмотритесь — блоки идут в обычном порядке, если их зафлоатить. Просто у них нужно зафискировать высоту, чтобы они не натыкались друг на друга:

5be1ce5d6e911614719938.png

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

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

Вот собственно и все.

Простой примерчик для старта:
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Archi1ect
Можно же с помощью CSS Grid позиционировать элементы.
Что то типа такого:
Ответ написан
Комментировать
Symphony
@Symphony Куратор тега CSS
masonjs.com
masonry.desandro.com
callmecavs.com/bricks.js
Надо лишь правильно настроить.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы