jquery - 父容器在响应式 jQuery slider 中折叠

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;
}

是否有任何其他方法可以在保持 slider 响应的同时阻止父容器折叠？

---

响应式的意思是我希望整个 slider 根据浏览器大小调整大小。为此，我不需要在容器大小上使用设置高度，但是当我将高度从整个 slider 上取下时，如第二个 fiddle 所示

Answer 1

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

这是因为 #sliderWrapper 不会占用其内容的高度。您可以避免绝对定位来解决问题:

Updated Demo

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

然后从包装器中安全地移除指定的高度。

---

修复图片下方的空隙

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

#sliderWrapper img { vertical-align: middle; }

---

让它响应!

为了使 slider 响应，您必须根据视口(viewport)的宽度设置 slider 项的宽度。这可能通过使用 viewport units 发生。 100vw 或以下 JavaScript 代码:

Example Here

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

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