1

我正在构建一个水平网站，该网站由一系列部分组成，在绝对定位的WIDE包装器中彼此相邻浮动。请看下图：

水平场地示意图

我需要遍历每个部分的内容，将其内容的宽度相加，并设置每个部分的宽度（因此它的内容可以水平放置）。然后我想遍历每个部分并将每个部分的宽度相加，并设置包装器的宽度（这样所有部分都适合。）

如果你看图，目标很简单——总结每个部分的内容，设置部分宽度。然后总结部分宽度，并设置包装器宽度。

下面是我的代码。类似的脚本在页面加载时运行，效果很好。这仅适用于调整大小事件。

function adjustPanels(){
    var sections = $("section"), count = sections.length;

    sections.each(function(){

        var totalWidth = 0,
        select = $(this).find('.mainScroll div, .mainScroll img');

        //we loop through all content within a section and sum it's widths
        select.each(function(index) {
            totalWidth += parseInt($(this).outerWidth(true), 10);
        });

        //here we add up all of the section widths so we can set a master width for the container
        sunWidth += parseInt(totalWidth, 10);

        //we set the width of each section
        $(this).css({ 'width' : totalWidth});

        //now we set the width of the container if we are done iterating (callback)
        if (!--count){
            $("#sectionWrap").css({'width' : sunWidth});
        }  
    });
}

$(window).resize(adjustPanels);

这不能正常工作。似乎导致问题的行是sunWidth += parseInt(totalWidth, 10);这似乎以指数方式将这些数字相加，因此容器太宽了。各个部分的宽度似乎正确，但总数不正确。知道如何解决这个问题吗？

4

1 回答 1

0

在函数顶部将 sunWidth 设置为零可以解决此问题，如下所示：

function adjustPanels(){
    var sunWidth = 0, sections = $("section"), count = sections.length;

    sections.each(function(){

        var totalWidth = 0,
        select = $(this).find('.mainScroll div, .mainScroll img');

        select.each(function(index) {
           totalWidth += parseInt($(this).outerWidth(true), 10);    
        });

        $(this).css({ 'width' : totalWidth});
        sunWidth += parseInt(totalWidth, 10);

        if (!--count){
             $("#sectionWrap").css({'width' : sunWidth});
        }

    });
}
于 2013-08-03T20:31:19.017 回答