垂直滾動條內容推送過來，創建水平滾動條

因此，這裏是我現在有工作的頁面：我工作的定位是正確的圖像，使其看起來像它的現身右側的http://home-dev.mpcleague.com/contact 垂直滾動條內容推送過來，創建水平滾動條

你的屏幕。目前爲止看起來不錯。

但我注意到，當我插入鼠標時，Safari和/或Mac檢測到我有鼠標並顯示垂直滾動條。這是正常現象，除了一點點圖像（滾動條的寬度）現在顯示在屏幕的邊緣外，這會創建一個水平滾動條。

與我的形象和它的容器中的HTML/CSS如下：

<div class="col-md-6 image-col"> 
    <div class="image-container"> 
      <img class="contact-graphic" src="/assets/contact-us-graphic.png" /> 
    </div> 

</div> 

.image-container { 
    height:70vh; 
} 
img.contact-graphic { 
    height:100%; 
    border-radius:5px; 
} 
.image-col { 
    padding-right:0 !important; 
    padding-left:0; 
    margin-right:0 !important; 
    overflow-x:hidden !important; 
    width:50vw !important; 
    margin-right:-50vw!important; 
    display:inline-block; 
}

在一個旁註，我的感覺這個CSS可能不是最好的。如果您有任何建議，我很樂意提供幫助。

謝謝！

來源

2017-08-14 x0y

從.image-col中刪除width: 50vw!important;！它是自舉網格的一部分。

來源

2017-08-14 15:59:03 Stuart

垂直滾動條內容推送過來，創建水平滾動條

回答

相關問題