Question

我想要一个包含多个div的水平滑块。我想只有3个可见，并希望使用％（宽度33％）而不是px。我的问题是滑块（一个jQuery插件）添加一个宽度为div的div：auto比窗口大得多，内容div的33％宽度相对于这个父级而不是包装器。

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

问题是：是否可以使多个内容div的宽度在加载时相对并调整为包装div的宽度，该宽度是视口的100％，而不是父视图的宽度？

我认为我应该从这样的事情开始，但不知道如何使它相对于包装器：

$(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

Answer 2

每次只能计算视口宽度的三分之一，并使用：

$(window).on('load resize', function(){
    $('.content').css( "width",($(window).width()/3)+'px');
});

另外，正如下面Deryck所指出的，使用$(document).ready(...)而不是window的{{1}}事件初始化此样式可能会更好，所以：

onload

注意：窗口对象可立即使用，因此可以直接或在$(window).on('resize', function(){ $('.content').css( "width",($(window).width()/3)+'px'); }); $(document).ready(function(){ $('.content').css( "width",($(window).width()/3)+'px'); });内附加resize事件处理程序。

Answer 3

我上面的BYossarian做对了，但你还需要在$（文件）.ready（）中运行相同的功能。

提供的代码只能在$（window）.on（'load resize'）事件上运行，而不是在最初加载页面时运行。

小提琴：http://jsfiddle.net/d9xuF/

$(document).ready(function(){
    $('.content').css("width",($(window).width()/3)+'px');
});

设置相对于窗口的div宽度，而不是父级

3 个答案: