如何擺脫對角線全屏佈局中的水平滾動條？

如何擺脫溢出水平滾動條？我有兩個使用CSS3的對角線形狀。我已經嘗試了一切權利，但沒有任何作品。我甚至把溢出：隱藏。如何擺脫對角線全屏佈局中的水平滾動條？

有沒有一種方法可以調整div .right，因此它不會出現水平滾動條？

我確定這是一個noob錯誤，但我需要另一雙眼睛。

.row { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.left{ 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #ff9a00; 
 
    position: absolute; 
 
    display: block; 
 
    left: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
} 
 

 
.right { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    display: block; 
 
    right: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
    overflow: hidden; 
 
}

<div class="dual-screen"> 
 
     <div class="row"> 
 
     <div class="left"></div> 
 
     <div class="right"></div> 
 
     </div> 
 
    </div>

來源

2017-09-01 PandaNinja

也許你應用溢出：隱藏到錯誤的元素，請嘗試將溢出規則應用於class =「row」的div。溢出應該應用於您想隱藏孩子溢出的容器。 –

謝謝你的迴應。 – PandaNinja

所有你要找的是overflow-x: hidden添加到您的包含的元素之一。
此元素必須至少有一個以上從.dual-screen。

overflow-x控制水平溢出。
將其設置爲hidden會隱藏此溢出，因此滾動條不可見。

在下面的例子中，我將其添加到<body>：

body { 
 
    overflow-x: hidden; 
 
} 
 

 
.row { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.left { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #ff9a00; 
 
    position: absolute; 
 
    display: block; 
 
    left: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
} 
 

 
.right { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    display: block; 
 
    right: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
    overflow: hidden; 
 
}

<div class="dual-screen"> 
 
    <div class="row"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>

希望這有助於！ :)

來源

2017-09-01 03:09:38

謝謝你的迴應！放置overflow-x：隱藏;在身體修復它，但我希望我可以調整。正確的div類，以防止它戳出來。有沒有辦法做到這一點？ – PandaNinja

不幸的不是。像這樣的「角度」元素的一般概念是允許他們戳出，然後在父級上使用「overflow：hidden」來掩蓋它。 –

織補。好吧，這是有道理的。謝謝你指出。我學到了東西。 – PandaNinja

如何擺脫對角線全屏佈局中的水平滾動條？

回答

相關問題