@smolPotat

Как лучше сверстать такие вкладки?

Доброго времени суток.
Изучаю фронт-энд где-то около месяца, возникла надобность сверстать нечто подобное:
5e73fe4a5b6b3311447973.png
Блок должен состоять из двух вкладок, сменяющих друг друга, с переключением, размещенным под вкладками.
Собственно, проблема возникла именно с размещением. Я знаю, как реализовать такой блок с переключением между вкладками, когда оно сверху, но вот как опустить его вниз, я не понимаю и все мои потуги решить эту задачу не возымели успеха.



Подскажите, как бы вы это сверстали?
Буду признательна за помощь.
  • Вопрос задан
  • 242 просмотра
Решения вопроса 1
SeaInside
@SeaInside
10 лет пилю все эти штуки
Добрый день.
По вашему примеру - я никогда не буду советовать делать какие-либо вкладки без использования JS - слишком негибко и неинтуитивно получается.
Но если всё-таки нужно без JS, то вы можете по-прежнему использовать селектор "~", если поменяете порядок элементов с помощью order из flex-спецификации.
Ваш причёсанный пример: https://codepen.io/morevm/pen/jOPpZKo
То, как это должно быть с JS: https://codepen.io/morevm/pen/XWbBZOK
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Если нужно, чтобы они всегда справа были и менялись, то что-то такое получилось
https://codepen.io/MCheryabushkin/pen/KKpBQMJ
Ответ написан
Ваш ответ на вопрос

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

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