@Arman4ik

Как сделать прибить блок вправо и выровнять по .container выше?

Ситуация:
Контейнер max-width: 1300рх, margin: 0 auto
Сделать чтобы при сужении окна было не вот так:
5fa343da0c653672351227.png

А вот так:
5fa343e997244889627304.png

Смысл в том чтобы зеленый блок был пришабашен к правому краю, и ровнялся по началу контейнера.
В мобильной версии там слайдер на owl carosel
и должно выглядеть так:
5fa344a0df843292589065.png

<div class="container">  
        <div class="blocks-wrapper">
            <div class="blocks"></div>
            <div class="blocks"></div>
        </div>
    </div>

        <div class="flex-container">
            <div class="flex-element1"></div>
            <div class="flex-element2"></div>
        </div>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
}

.blocks {
    height: 300px;
    width: 40%;
    background: red;
}

.blocks:first-child {
    background: blue;
}

.blocks-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.flex-container {
    margin-top: 120px;
    background: #aaaa;
    display: flex;
    justify-content: space-between;
} 

.flex-element1 {
    max-width: 100%;
    width: 1px;
    height: 300px;
    background: rgb(221, 92, 92);
}
.flex-element2 {
    max-width: 100%;
    width: 90%;
    height: 300px;
    background: green;
}


Заранее спасибо
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
Вынуть зелёный блок из контейнера и дать ему подобный стиль
.green-wrapper {
  margin-left: calc(50% - 1300px/2);
}

Ну и дальше менять значение на брейкпоитнах

ПС. Недавно встретил любопытное решение этой же задачи, но как по мне излишне усложненное
https://www.youtube.com/watch?v=NVdlfhkDAGM
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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