Есть контейнер. С одной стороны отступ, с другой прижат к краю. Как сверстать?

Question

[mydarck]

Шаблон адаптивного сайта, построенный на сетке подобной boodstrap. Все предыдущие блоки имеют условный контейнер, который на определенном разрешении экрана имеет фиксированную ширину и выровнен по центру. Блок, который нужно сверстать и последующие блоки, с левой стороны имеют отступ как у фиксированных блоков, а с правой стороны сделаны таким образом словно контейнер растянут на 100%. Соответственно при уменьшении/увеличении разрешения экрана, отступ слева должен повторять размер предыдущих, фиксированных блоков. Подскажите, пожалуйста, как это можно сделать?

Comments

[Dymok]

Костыльно, но я ширину подобных блоков рассчитываю через JS:
ширина отступа от края экрана до контента + ширина растягиваемого блока внутри контейнера
примерно так на jQuery:

var windowWidth = $(window).width();
    var containerWidth = $('.popular-services .container').first().outerWidth();
    var sideWidth = (windowWidth - containerWidth) / 2;
    var leftBlockWidth = $('.popular-services__left').outerWidth();
    $('.popular-services__left .bg').css('width', sideWidth + leftBlockWidth + 30 + 'px');

[mydarck]

Dymok, добрый день. Мне кажется, что без js скорее всего не обойтись. Я прошу прощения, на перекрепленной картинке не видно, что левый край левого же блока прижат к левой стороне стороне как-бы существующего с одной стороны контейнера. Вот мой вариант, он не верный, но там понята суть проблемы.

Answer 1

[Vyach Gor]

как то так - link

updаte version (только там еще нужно на адаптиве подправить чтоб правый блок не сплющивало, но то уже разберетесь)

Comments

[mydarck]

Похоже, но не совсем то. Деление должно быть не по 50%, а как то иначе. Получается, что у нас известна и постоянна одна величина - левый блок. Его ширина составляет 228px, но при этом не известно сколько это процентов от экрана посетителя. Соответственно сделать деление по типу 30/70 или 20/80 у нас не получится.

Спасибо.

[Михаил]

mydarck,
обёртке flex
левому width: calc(50vw - %сколько нужно в px%)
правому flex-grow 1

[Михаил]

mydarck, https://codepen.io/notiv/pen/MWKaxGW

[mydarck]

Михаил, добрый день. В результате ведь получилось приблизительно как у Vyach Gor, а именно, левый блок прижат к центру. Мне нужно добиться результата, когда левый блок находится на одном уровне с предшествующим ему контейнером, а правый занимает оставшийся экран.
Вот пример, на нем видно, что левый край контейнера находится левее, чем начало блока «left».

[Михаил]

mydarck, ну так поставьте этому блоку left нужную ширину

[mydarck]

Михаил, а вот мои потуги, но там отступ с левого края зависит от того, сколько процентов ширины выставлено у правого блока. Это было бы даже не очень страшное, хоть и не красивое, решение, но опять таки левый край стремиться к центру, а не к левому краю контейнера.

[mydarck]

Михаил, я немного не понимаю, можете на своем примере это показать.

[Михаил]

mydarck, так чтоле?

[mydarck]

Михаил, да, суть верная, но с нюансами. Например, зайти в инспектор кода и выбрать режим адаптивного дизайна, то видно, что края у данных блоков совпадают только в пиковые значения брейкпоинтов. Я, по сути, и пытаюсь сделать так, чтобы левый край нижнего блока, всегда совпадал с контейнером, а правый был уперт в конец экрана посетителя.

[Vyach Gor]

updаte version (только там еще нужно на адаптиве подправить чтоб правый блок не сплющивало, но то уже разберетесь)

Answer 2

[Дуболом Одноклеточный]

display: flex;
justify-content: right; /* или align-items: right */
width: 100%;

Изменено:
https://codepen.io/duboloms/pen/PoZPrje?editors=0100

Comments

[mydarck]

Добрый день, Дуболом Одноклеточный. Не много не понятно, что с этим сделать. Можно это на примере показать?

[Дуболом Одноклеточный]

mydarck, Прости что так долго не рагировал:
https://codepen.io/duboloms/pen/PoZPrje?editors=0100

[mydarck]

Дуболом Одноклеточный, да нет проблем, спасибо, что вообще пытаешься мне помочь. Но это не совсем то. В примере, который я выслал, сверху над блоком half находится блок container. Мне нужно, чтобы их левые края были одинаково удалены от левого края монитора. Т.е. блок half должен начинаться на одном уровне с container.

[Дуболом Одноклеточный]

mydarck, Сейчас сделаем! (я там еще адаптив слайдеров добавил)

[Дуболом Одноклеточный]

mydarck, вот обновленная версия: https://codepen.io/duboloms/pen/PoZPrje?editors=0100
Если изменить размер окна, а потом обновить, все работает.

Answer 3

[Ivan Sedov]

Думаю под свою верстку сможете сами адаптировать эти примеры.

Если нужно чтобы слайды выходили за пределы контейнера добавляем обертку sub-container

.sub-container { 
  display: flex;
  flex-wrap: wrap; 
  margin-right: calc(50% - 50vw);
 }

Если не нужно чтобы слайды выходили за пределы удаляем обертку sub-container и добавляем во wrapper
margin-right: calc(50% - 50vw);