我正在构建一个水平网站,该网站由一系列部分组成,在绝对定位的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);
这似乎以指数方式将这些数字相加,因此容器太宽了。各个部分的宽度似乎正确,但总数不正确。知道如何解决这个问题吗?