@nyrau_v_tvorojok

Изменить расположение элемента?

<div class="slider">

    <div class="slider-background col-md-12">

        <div class="slider-text">
            <p class="slider-h-p">Здесь радиаторы</p>
            <p class="slider-p-p"> УAловите свое руки мощные  вдохновениев  УAловите свое руки мощные  вдохновениев <br>УAловите свое руки мощные  вдохновениев УAловите свое руки мощные  вдохновениев <br>УAловите свое руки мощные  вдохновениев УAловите свое руки мощные <br> вдохновениев УAловите свое руки мощные  вдохновениев УAловите свое руки мощные  вдохновениев</p>
        </div>

    </div>

    <div class="cursors ">

            <div class="cursor cursor-left">
                <div class="cube">
                    <div class="arrow arrow-left"></div>
                </div>
            </div> 

            <div class="cursor cursor-right">
                <div class="cube">
                    <div class="arrow arrow-right"></div>
                </div>
            </div>

    </div>

</div>


.slider {
    position: relative;
    overflow: hidden;
    .slider-background {
        transition: transform 0.6s ease;
        height: 52.5vh;
        background-image: url('/img/sklad-background.png');
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        .slider-text {
            .slider-h-p {
                color: #FFCE00;
                font-family: 'Rubik', sans-serif;
                font-size: 45px;
            }
            .slider-p-p {
                color: #F4F2E9;
                font-family: 'Rubik', sans-serif;
            }
        }
    }
    .cursors {
        //height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 45%;
        .cursor {
            /*position: absolute;
            top: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transform: translateY(-50%);*/
            .cube {
                width: 55px;
                height: 55px;
                border-radius: 2px;
                border: 2px solid #FFCE00;
                .arrow {
                    //position: absolute;
                    border: solid #FFCE00;
                    border-width: 0 6px 6px 0;
                    display: inline-flex;
                    padding: 6px;
                }
                .arrow-left {
                    margin-top: 16px;
                    margin-left: 18px;
                    transform: rotate(135deg);
                    -webkit-transform: rotate(135deg);
                }
                .arrow-right {
                    margin-top: 16px;
                    margin-left: 12px;
                    transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                }
            }
        }
    }
}


Делаю слайдер
Задал .cursors position: absolute, что написать, чтобы .cursor-right был по правой стороне?
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
@ArtJH
1) заливать код надо в песочницу. Никому не хочется разбирать чужой код
2) css ответ
position: absolute;
right: 0;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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