Позиционирование изображения с рамкой вправо создать пустое пространство - PullRequest
Новая
       15

Позиционирование изображения с рамкой вправо создать пустое пространство

0 голосов
/ 02 ноября 2019

Это после позиции: https://i.imagesup.co/images2/bcad70bb61c5f1b6a99f0a0cd9a5405a9dd52c1e.png

Я хочу, чтобы часть границы «глотала» на экране, как это, но без создания переполнения в правой части экрана: https://i.imagesup.co/images2/b6d97f6f3812bd958a3471fc27fd8cc5ec08a106.png.

граница создает этот пробел, но я не могу это исправить. float, относительный, полевой, абсолютный все равно не поможет. Что я могу сделать? Также overflow-x: скрытый не помогает. 

<div>
<main>
            <img id="logo" src="Logo.png" alt=""/>

            <div id="purpuleLineBox">
                <div id="purpuleLine1"> <p>100% recyclable and bio-degradable</p> </div>
                <div id="purpuleLine2"> <p>Simulates the natural ripening process, organic</p> </div>
                <div id="purpuleLine3"> <p>The quickest way to achieve the  perfect avocado taste</p> </div>
                <div id="purpuleLine4"> <p>Work with Mango, Banana, Peach, and another climacteric fruits</p> </div>
                <div id="purpuleLine5"> <p>The user interface on the bag shows when an avocado is fully ripen</p> </div>
            </div>
        </main>
</div>

body {
    margin: 0 auto;
}

#divStyle1 {
    height: 90vh;
    background-color: #016087;
}

#divStyle2 {
    height: 10vh;
    background-color: #1D232F;
}

#logo {
    transform: rotate(5deg);
    border: 10px dashed black;
    position: absolute;
    right: -40px;
}
...