Как сверстать этот блок?

Question

[froggush]

Есть следующая часть макета.

Вопрос: как сверстать этот блок так, чтобы у текста в верхней левой части отступ от левого края страницы был такой же, как в блоке выше (на фото видна только голубая полоска этого блока). Суть в том, что на странице есть контейнер, а я не знаю, как запихнуть в него нормально этот текст, но чтобы картинка справа занимала все свободное место до правого края страницы.

Вопрос сформулирован плоховато. Извините

Comments

[Андрей Федоров]

Это настолько же легко на сколько скучно. Это дз на курсах по верстке что ли?

[froggush]

Андрей Федоров, не, сам ковыряюсь в левых макетах

[Андрей Федоров]

froggush, css-свойство padding вам что-то говорит? А псевдо-селектор :nth-child(odd)?

[froggush]

да, говорит. и что, вручную подбирать, чтобы совпадало?

[Argentinium]

Я обычно в этих случаях меняю flex direction если делаю на флексах конечно.

[froggush]

Андрей Федоров, ответьте, пожалуйста)

[Андрей Федоров]

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

[froggush]

Андрей Федоров, хорошо. спасибо

Answer 1

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

Вижу несколько вариантов.
1. все что сзади текста это бекграунд. Половина бекграунда - сплошной цвет, вторая половина изображение.
в этом случае контент просто в сетке.
2. Это два контейнера. тогда тексту в контейнере нужно дать отступ.
на примере левого контейнера.
Допустим у нас сетка 4го бутстрапа, у которого идет 1170px и поддинги по 15px. Тогда делаем для текста стили как-то так:

.text-wrapper {
  margin-left: calc(50% - 1140px/2);
  padding-left: 15px;
  padding-right: 15px;
}

Comments

[froggush]

Спасибо! Помогло!