1

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

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

问题是：是否有可能使几个内容 div 的宽度在加载时是相对的，并调整到包装 div 的宽度，即视口的 100%，而不是父级的宽度？

我想我应该从这样的东西开始，但不知道如何使它相对于包装器：

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

3 回答 3

2

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

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

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

于 2013-09-14T21:44:44.467 回答
2

您可以每次只计算三分之一的视口宽度，并使用它：

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

此外，正如 Deryck 在下面指出的那样，您最好使用$(document).ready(...)而不是window'onload事件来初始化这种样式，所以：

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

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

注意：window 对象是立即可用的，因此调整大小事件处理程序可以直接附加，也可以在$(document).ready(...).

于 2013-09-14T21:54:00.200 回答
1

我上面的 BYossarian 是对的，但您还需要在 $(document).ready() 中运行相同的函数。

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

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

$(document).ready(function(){
    $('.content').css("width",($(window).width()/3)+'px');
});
于 2013-09-14T22:30:35.447 回答