Question

我有一个jQuery Slider，我试图做出响应，这是一个jsFiddle：http://jsfiddle.net/mwcw4swf/1/

我遇到的问题是我必须设置父容器的高度，否则它会崩溃：

#sliderWrapper {
    max-width: 800px;
    height: 200px; 
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

我尝试使用clearfix来阻止它发生但它似乎不起作用：http://jsfiddle.net/mwcw4swf/2/

<div  class="spacer"></div>

CSS：

.spacer {
    height: 0;
    clear:both;
}

是否还有其他方法可以阻止父容器折叠，同时仍然保持滑块响应？

我的意思是响应是我希望整个滑块根据浏览器大小调整大小。要做到这一点，我不需要在容器的大小上使用设置高度，但是当我取下高度时，整个滑块会折叠，如第二小提琴所示

Answer 1

不确定为什么使用绝对定位从正常流中删除#sliderList元素。

这是因为#sliderWrapper赢得了其内容的高度。您可以避免绝对定位来解决问题：

<强> Updated Demo

#sliderList {
    list-style: none;
    /* left: 0px; position: absolute; */
    position: relative;
    width: 200000em;
    margin: 0; padding: 0;
}

然后从包装器中安全地删除指定的height。

修复图像下的空白

在图像（内联级别元素）下面还有~5px的间隙，它属于在内联流中具有下行的小写字母。你可以通过vertical-align属性定位图像来解决这个问题：

#sliderWrapper img { vertical-align: middle; }

让它响应！

为了使滑块响应，您必须设置滑块项的width与视口宽度的关系。这可以通过使用 viewport units 100vw或以下JavaScript代码来实现：

<强> Example Here

$(window).resize(function () {
    $('.sliderItem').width($(window).width());
}).resize(); /* trigger the handler */

PS：我还改进了演示中的标记和一些声明

父容器在响应式jQuery滑块中折叠

1 个答案:

修复图像下的空白

让它响应！