我正在使用带有 Jquery 的 Tiny 滚动条插件来查看相册。除了一个包装问题外,它工作正常。
例子:http://67.23.251.125/~emelieze/test/index.php?t=collage&p=collage/Test&scroll=yes
正如您可能看到的那样,图像(或者更确切地说包含图像的 div)没有排列在单行中,它们仅在您向右滚动时才会排列。overview-div 具有固定的宽度和高度,但它仍然包裹到 viewport-div(黑色边框使其很明显。)overview-div 的宽度是用 php 计算的,因此不能将其放在样式表中.
滚动条 div 及其内容如下所示:
<div id='scrollbar2' >
<div class='viewport' style='height: 330px; '>
<div class='overview' style='width: 2560px; height: 330px; '>
<div class='scrollimage' style='width: 500px;'>
<img src='cms/album/collage/Test/blue.png'>
<br>
example 3</div>
<div class='scrollimage' style='width: 500px;'>
<img src='cms/album/collage/Test/green.png'>
<br>
example 5</div>
<div class='scrollimage' style='width: 500px;'>
<img src='cms/album/collage/Test/orange.png'>
<br>
example 1</div>
<div class='scrollimage' style='width: 500px;'>
<img src='cms/album/collage/Test/red.png'>
<br>
example 4</div>
<div class='scrollimage' style='width: 500px;'>
<img src='cms/album/collage/Test/yellow.png'>
<br>
example 2</div>
</div>
</div>
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div></div></div></div>
CSS:
#scrollbar2 { margin: 0px auto 40px auto; clear: both;}
#scrollbar2 .viewport { overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; padding: 0; margin: 0; position: absolute; border: 1px solid black; overflow: hidden;}
#scrollbar2 .scrollbar { position: relative; overflow: hidden; margin: 0px; clear: both; height: 15px; }
#scrollbar2 .track { background-color: #EEE; height:4px; position: relative; padding: 0px; }
#scrollbar2 .thumb { background-color: #CCC; background-position: 100% -15px; height: 4px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 0px; }
#scrollbar2 .thumb .end{ overflow: hidden; background-position: 0 -15px; height: 13px; width: 5px;}
#scrollbar2 .disable { display: none; }
.scrollimage {float: left; border: 0px solid #000; position:relative; margin:0px 10px 0px 0px;}
内头标签:
$(document).ready(function(){var scroll = $('#scrollbar2,.scrollbar,.small_menu,.track,.viewport');
scroll.css('width', (screen.width)/1.5 + 'px')});
$(window).bind('load',function(){
$('#scrollbar2').tinyscrollbar({ axis: 'x'});
});
如何阻止overview-div 包裹到viewport-div?