3

在这个网站上：http: //houston.aiga.org/

尽管滑块在浏览器窗口大小上是全宽/可变的，但每个滑块项的标题始终缩进以与内容对齐。

我试过设置这个：http: //jsfiddle.net/tapiman/xS7vn/

$(window).resize(function() {
    $('#item').css("padding-left",$(window).width()/2);
});

该功能正在运行，但计算将项目推入了减小窗口大小而太远的窗口大小。

工作滑块示例中的行是：

$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);

extraSpace在哪里$(window).width()

感激地收到任何帮助 - 提前致谢

4

1 回答 1

2

看来你毕竟忘记了宽度：http: //jsfiddle.net/tapiman/xS7vn/5/

这就是我想出的。愚蠢的是，console.log 不断返回 +8 差异，我不得不硬编码删除。这是你要找的吗？

$(window).resize(function() {
    var ItemWidth = $(".wrapper").width();
    $('#item').width( ItemWidth );
    var WindowWidth = $(window).width();
    // cannot resize because window is smaller than the wrapper
    if( ItemWidth > WindowWidth ) {
        var PadWidth = 0;
    } else {
        var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
    }
    console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );

    $('#item').css("margin-left",PadWidth + "px");
    });

更新; 还检查http://jsfiddle.net/xS7vn/8/以获取最新更新，包括在页面加载时调整大小。

于 2013-04-08T07:59:49.337 回答