@MadBliss

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

Понимаю, что наверное элементарный вопрос, но я еще только учусь, don't bully me, пожалуйста.
Как сверстать такие блоки (два левых должны быть кликабельные ссылки), при добавлении текста у меня уезжает картинка. А если сделать абсолютное позиционирование, то как потом адаптив запилить?
(img-1 link: https://gamerteams.com/web/uploads/gallery/10000/1... )
(img-2 link: https://playvalorant.com/static/agents-group-539f9... )
P.S. В правом блоке можно ничего не писать, проблема только в двух левых
5f84caa50e35d899897515.png
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Гридами проще всего.
На мобилках в столбик, на десктопах как на макете.
https://jsfiddle.net/xjks3vgo/

Зачем там абсолюты - не поняла.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@DrWeyber
Вот примерно так, только не используйте фиксированные ширину/высоту, как это делал я, у вас будет контент внутри, регулируйте паддингами и марджинами.
https://codepen.io/DrWeyber/pen/MWeawxG - Мой код
https://frontender.info/a-guide-to-flexbox/ - Советую изучить флексы для такого дела ;)
Ответ написан
@ArtJH
а в чем проблема в адаптиве?
1) Почитайте про flex box, использовать будете постоянно, да и будет яснее как делать адаптив
2) Картинку либо через img и абсолютом или через css background-image , также не забудьте им добавить max-width: 100%
Если есть еще вопросы, задавайте
Ответ написан
Ваш ответ на вопрос

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

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