MykolaPetiukh
@MykolaPetiukh
Директор кафе

Как сверстать такие сноски?

Подписи и линии к ним. Как сделать, чтоб более-менее адаптивно было.
5fc5176122abb021614058.png
  • Вопрос задан
  • 417 просмотров
Пригласить эксперта
Ответы на вопрос 1
@deader25
Front-End developer
Здесь уже не слишком адаптивно, так как не ясно как должны элементы размещаться потом при уменьшении экрана. Так как к примеру кабель уже вылазит за пределы блока и т.п.
Но в любом из вариантов поможет такая структура:
<div class="parent">
  <h3>Ноут</h3>
  <img>
</div>

Где у тебя будет .parent и img - position: relative; а h3 - position: absolute;
То есть нечто в таком роде:
.parent{
  position: relative;
  width: 200px;
  padding: 100px 0 0;
}
.parent img{
  position: relative;
  width: 200px;
  height: 100px;
 }
.parent h3{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
 /* стили текста */
}
.parent h3:after{
/* Стили линии, ведущей к img */
}


И вот такие блоки уже перемещай как необходимо для адаптива.
Но сам блок не оч адаптивный.
Проще будет, если прямо так нужно - картинкой сделать и все) + у неё width: 100%; и она уже сама занимает ширину экрана, но это не ок решение, лучше заморочиться и сделать вариантов выше, но придется с адаптивом повозится.
Опять же - в зависимости от того, как это все должно выглядеть)
Ответ написан
Ваш ответ на вопрос

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

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