调整窗口大小会导致下一个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在响应水平滚动网站中显示

回答

相关问题