調整窗口大小會導致下一個div在響應水平滾動網站中顯示

網站在所有分辨率下都顯示正常，當窗口大小調整時會出現問題。調整窗口大小會導致下一個div在響應水平滾動網站中顯示

所以我所做的就是創建5個div容器，並給出每個容器在寬度500％內的20％寬度。下面是其中的一個

<div id="workslide" class="container"> 
//some a tags goes here 
</div>

CSS

.container { 
    bottom: 0; 
    float: left; 
    height: 100%; 
    margin: 0; 
    position: relative; 
    width: 20%; 
}

在每個容器是在CSS background-size: contain;它正確地縮放所有分辨率設置IMG幻燈片。例如，當窗口從左側調整大小時，會發生這種情況。前面的div出血： enter image description here

任何想法，將不勝感激！

來源

2013-05-06 chucky

我只是一小會兒前注意到一個類似的問題：http://stackoverflow.com/questions/16403507/proper-window-resizing-of-full-width-ul-and-li -for-responsive-website – isherwood 2013-05-06 18:21:27

通過百分比寬度運行的響應滑塊非常麻煩。使用jquery通過'left' px值滑動到合適的幻燈片更加可靠。 – 2013-05-06 19:08:57

真的嗎？如果它沒有響應，它可能會更糟糕，所以寧願處理這個問題。使用jQuery.animate（）滾動身體;工作正常。在上面的例子中，下一個div將對齊並正確縮放。 – chucky 2013-05-06 19:21:52

我在Matt的指針後執行了一個修復問題。現在的工作完美：

//added following lines of code within document ready: 
$(window).resize(function() { 
$(window).scrollLeft($(/*element you have scrolled to*/).offset().left); 
});

來源

2013-05-07 19:23:21 chucky

調整窗口大小會導致下一個div在響應水平滾動網站中顯示

回答

相關問題