Не могу расположить правильно, как это сверстать?

Question

[Кирилл]

Сам понимаю, что вопрос ужасно глупый, но как расположить левый блок к картинке? Пробовал использовать flex, inline-block - видимо что-то напортачил потому что не работало.
Вот голая вёрстка

Вот как нужно расположить эти блоки

Не кидайте помидоры, во время курсов всё версталось как налету :) Первый самостоятельный проект, заранее спасибо

Comments

[Froggyweb]

ну флекс align-iteb center

[Вадим]

Ну, вообще, этот чувак с телефоном у Вас не контентное изображение. Следственно - фоновое.
Делаете background-image, и позиционируете через background-position

[Ankhena]

И тут я соединю 2 комментария выше :)

Телефон это действительно не контентное изображение, а значит не img.
Но зато его можно сделать не просто фоном, а фоном псевдоэлемента.

А дальше флексом или абсолютом.

Весьма схематически флексами: https://jsfiddle.net/sme3towx/
Абсолютами (если нужно менять порядок) https://jsfiddle.net/6jkuqwa2/

Или гридами.

[Антон Литвиненко]

А я добавлю, что такие вещи нужно обязательно решать самостоятельно, потратите час на варианты, гугл, дойдите сами, задача то элементарная. Тем более после курсов

[Vadim Rublev]

Не понял с чего взято, что человек - это фон? Я вижу картинку - типа <div> - со скруглёнными углами и тенями. Т. е. имеем два <div>'а; либо часть с текстом - это вообще текст.
Значит делаем обтекание текстом <div>'а слева. Если текст и картинка.
Либо располагаем две картинки рядом (в линию). Если картинка и картинка (<div> и <div>).

[Ankhena]

Vadim Rublev,

Не понял с чего взято, что человек - это фон?

Это изображение не несет дополнительного смысла и если останется только разметка, то оно там будет выглядеть нелепо. Т.е. при отсутствии стилей и заодно этого человека в телефоне, смысл не потеряется.

Есть, конечно, нюанс. Если в реальной жизни там на картинке будет рекламируемое приложение, то как оно выглядит в телефоне и ему можно будет придумать нормальный alt, т.е. эта картинка станет изображением товара или услуги, то она будет контентной и её нужно будет делать тегом img.

Значит делаем обтекание текстом 'а слева. Если текст и картинка.
Да, лет пяток назад, флоаты использовали для сеток.
Теперь для этого есть флексы и гриды.

[Vadim Rublev]

Ankhena, Какой смысл несёт изображение - это автору вопроса виднее, кажется. Столько рассуждений про чужие мысли! )) Я просто посмотрел и сказал про то, что вижу. Что уж там подразумевается - вопрос десятый.
И я ничего не говорил про флоаты. Принцип описал, всего-то.

[Ankhena]

Vadim Rublev,

Значит делаем обтекание текстом <div>'а слева. Если текст и картинка.

Это не про флоаты?
Извините.

это автору вопроса виднее, кажется

Не уверена. Обычно при таких вопросах, про семантику никто думать даже еще и не начинает.

[Vadim Rublev]

Вам виднее.