jquery - 设置相对于窗口而不是父窗口的 div 宽度

Question

我想要一个包含多个 div 的水平 slider 。我只希望其中 3 个可见，并希望使用 %(宽度 33%)而不是 px。我的问题是 slider (一个 jQuery 插件)添加了一个宽度为 auto 的 div，它比窗口大得多，并且内容 div 的 33% 宽度变得相对于该父级而不是包装器。

我无法在 css 中实现此目的，因为内容 div 必须保持相对而不是绝对。

问题是:是否可以使多个内容 div 的宽度在加载时相对，并将大小调整为包装器 div 的宽度(即 100% 的视口(viewport)而不是父级的宽度)？

我认为我应该从这样的东西开始，但不知道如何使其相对于包装器:

$(window).on('load resize', function(){
    $('.content').css( "width","33%" );
});

Answer 1

在“现代”浏览器中使用 Viewport-percentage lengths .

在你的情况下div.content {width: 33vw;}

对于不支持的浏览器，有一些 Polyfill。您可以在这里找到:https://gist.github.com/LeaVerou/1347501