我知道这可以有一个简单的解决方案，但我找不到方法。
我正在使用这个 JQuery 插件（TinyScrollbar）构建一个水平“滚动框”：http: //baijs.nl/tinyscrollbar/
我在每一页上都有两个“滚动框”，但里面有不同的“子”框（在一行中）。
这是第一个“小部件”的 HTML 代码。
<div id="scrollbar1">
<div class="scrollbar">
<div class="track"><div class="thumb"><div class="end"></div></div></div>
</div>
<div class="viewport">
<div class="overview">
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
</div>
</div>
这是第二个“小部件”的 HTML 代码。
<div id="scrollbar1">
<div class="scrollbar">
<div class="track"><div class="thumb"><div class="end"></div></div></div>
</div>
<div class="viewport">
<div class="overview">
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
</div>
</div>
</div>
</div>
每个“项目”都有固定的高度和宽度（即 100 像素）和向左浮动（用于一行显示）。所有项目都由具有“概述”类的 div 包含。“概述”的 CSS
#scrollbar1 .overview {
left: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 300px;
}
我的问题是：当“项目”> 三个或 < 三个以连续显示所有项目时，如何动态更改 div 的宽度？我知道我可以使用插件的更新功能，但我不知道如何实现它。
我正在使用这个 JavaScript
$(document).ready(function($) {
$('#scrollbar1').tinyscrollbar({ axis: 'x'});
});