@badassstas

Как реализовать данный фрагмент макета?

Добрый день, в макете есть галерея которая выглядит следующим образом: 5f0549cd7eb82817547709.png Как реализовать расположение всех этих кружков так же, как в макете?
  • Вопрос задан
  • 83 просмотра
Решения вопроса 4
SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием
1) самый простой position relative для родителя и position absolute для каждого кружка. по центру ровнять
left:50%;
  transform: translate(-50%, -50%);

2) это три колонки только в первой 3 кружка и средний немного влево (можно сделать margin или position relative; left\right:50px)
средняя колонка это один кружок, а третья это как первый только значение стороны другое.

я бы делал первым вариантом, учитывая что это просто вызовы модалок, также можно красиво заанимировать и будет проще чем вторым способом
Ответ написан
HunteR-VRX
@HunteR-VRX
Помешанный на WEB
Здравствуйте!
Вариантов множество, приведу пару из них:

1. Все, без исключения элементы, позиционируются - абсолютно ( position: absolute; )

2. Для более мелких окружностей используйте верстку с помощью сетки flex или grid, а для их точного расположения, задавайте нужные гаттеры ( gutters )
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
Front-End Developer & Fullstack Designer
Абсолютное позиционирование для мелких блоков + transform: translate и всё - этого будет достаточно.

Например:



Хотя можно и без абсолютного позиционирования.

Например:

Ответ написан
LenovoId
@LenovoId
я в Рио де Жанейро ..офигеть
примерно так

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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