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

Шаблон адаптивного сайта, построенный на сетке подобной boodstrap. Все предыдущие блоки имеют условный контейнер, который на определенном разрешении экрана имеет фиксированную ширину и выровнен по центру. Блок, который нужно сверстать и последующие блоки, с левой стороны имеют отступ как у фиксированных блоков, а с правой стороны сделаны таким образом словно контейнер растянут на 100%. Соответственно при уменьшении/увеличении разрешения экрана, отступ слева должен повторять размер предыдущих, фиксированных блоков. Подскажите, пожалуйста, как это можно сделать?5edf32f88fbe4533491646.jpeg
  • Вопрос задан
  • 643 просмотра
Пригласить эксперта
Ответы на вопрос 3
sharnirio
@sharnirio
Front-end developer
как то так - link

updаte version (только там еще нужно на адаптиве подправить чтоб правый блок не сплющивало, но то уже разберетесь)
Ответ написан
duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.
display: flex;
justify-content: right; /* или align-items: right */
width: 100%;

Изменено:
https://codepen.io/duboloms/pen/PoZPrje?editors=0100
Ответ написан
@ivansedov
Думаю под свою верстку сможете сами адаптировать эти примеры.

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




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

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы