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

Question

[stasov1]

Добрый день, подскажите плиз как верстаются такие блоки когда есть контейнер-сетка, одна колонка текст, другая колонка изображение, но только оно идет не до конца контейнера, а до края экрана.



синий - это блоки с изображениями.

Всем спасибо.

Answer 1

[Рюрик Ростиславич]

Беграунд 50% right контейнеру в котором изображение и текст

.container{background: url(img.png) no-repeat 100% 50%;}

<div class="container">
<div class="row">
<div class="textblock">
</div>
</div>
</div>

Comments

[massef]

Рюрик Ростиславич а если в требовании чтобы картинка была img?

[Рюрик Ростиславич]

massef: кликабельной? тоже самое просто img в контейнере на 50%, остальное в textblock

[stasov1]

не понимаю как ваш вариант привязать к сетке, допустим 960px сетка, текст будет занимать 3 столбца это примерно 240px, соответственно позицию background нужно будет не 50% и больше, но если при таком раскладе открыть сайт на большом экране то текст заедет на изображение

[Рюрик Ростиславич]

stasov1: Я подразумеваю что контейнер идет на full width а из него уже row 960

[stasov1]

Рюрик Ростиславич: это я понял, получается если фон 50% от ширины экрана, то и текст должен быть в половину контейнера, а если текст будет уже чем половина контейнера, получится большой зазор между текстом и фоном, и соответственно на разных размерах экранов будут проблемы. https://jsfiddle.net/qdh1yhnv/

[Рюрик Ростиславич]

stasov1: нет нет) текстовый блок живет в своих настройках и row , его половину контейнера можно вообще не трогать. Текст и изображение формально не вместе , а только в одном контейнере

[stasov1]

Рюрик Ростиславич: тогда это совсем не то) нужно чтобы между текстом и картинкой был зазор одинаковый на всех размерах экранов для десктопа, а так он всегда разный получается. И еще в таком раскладе нельзя будет сделать выравнивание текста по тому краю где изображение, все из-за того же большого зазора.

[Рюрик Ростиславич]

stasov1: Тогда просто обыграйте через текст)

Answer 2

[HamSter]

Например: CODEPEN

Comments

[stasov1]

Когда блоки 50% ширины это легко, вопрос именно в том что блоки с текстом могут быть допустим 3-4 столбца сетки, а картинка начинается сразу после текста и до границы экрана