Как прижать картинку к правому краю и чтобы по ней измерялась высота всего блока?

Question

[Monile]

Вставляю картинку и придаю ей значение float: right; и она у меня уходит вниз(см 1 картинку). Как сделать чтобы она равнялась по центру и по ней вычислялась высота блока(см 2 картинку)(1 картинка)
(2 картинка)

Comments

[Вадим]

1) обернуть контент в котэйнер с ограничением по максимальной ширине.
2) весь текст в один блок, картинку рядом.
3) Задать контэйнеру display: flex;
4) Профит?

[Monile]

Вадим, типо текст с кнопкой в 1 контейнер, картинку в другой и задать flex?

[Вадим]

Monile, Да.
И если хотите чтоб они по разным краям контейнера расположились то контейнеру ещё задать justify-content: space-between

[Monile]

Вадим, вроде сделал и заработало, но потом посмотрел на макет и увидел что у меня картинка выходит за сам контейнер и получается flex здесь не поможет, стоит наверное position absolute?

[Вадим]

Monile, суровая правда в том, что эта картинка - не контентная. А не контентные картинки в разметку не добавляют. Это фоновая картинка. И размеры блока должны зависеть от количества текста и внутренних отступов. И так же можно задать минимальную высоту.
А фоновую картинку можно позиционировать как хочешь.

Answer 1

[Кирилл Резанов]

Проще большому блоку (родителю) дать:

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

У тебя текст и картинка встанут в линию и разойдутся в разные стороны

Comments

[Monile]

Помогло конечно, но я посмотрел свой макет и увидел что картинка оказывается выходит за пределы моего контейнера у которого есть max-width, мне нужно как-то выбить картинку из этого контейнера, может присвоить ей position absolute и уже подстраивать?

[Кирилл Резанов]

Monile, есть скриншот?

[Кирилл Резанов]

Monile, попробуй уменьшить картинку и текст, на втором скрине картинка меньше и текст меньше, должно сработать