多行水平 Jquery 滚动条
我需要一个两行的滑块,在某种程度上是可能的,但这不是我需要的。这是交易;
根据 教程 我可以排队水平多个div。
但如果我需要两行,那么它会对这样的项目进行排序:
而我需要的是这样的:
(灰色区域不可见)
解决此问题的正确方法是什么?
代码的 HTML 就像:
<div id="main">
<div id="content-slider"></div>
<div id="content-scroll">
<div id="content-holder">
<div class="content-item" id="item-1">item 1</div>
<div class="content-item" id="item-2">item 2</div>
<div class="content-item" id="item-3">item 3</div>
<div class="content-item" id="item-4">item 4</div>
<div class="content-item" id="item-5">item 5</div>
<div class="content-item" id="item-6">item 6</div>
<div class="content-item" id="item-7">item 7</div>
<div class="content-item" id="item-8">item 8</div>
</div>
</div>
</div>
</div>
可以使用 CSS,但我正在寻找一种对 HTML 代码干扰最小的解决方案。
I need a slider with two rows, It is possible in a way, but that's not what I need. Here is the deal;
According to a tutorial I can line up multiple div's horizontally.
But if I need two rows, then it will sort items like this:
While what I need is this:
(gray area is invisible)
What is the correct method to solve this problem?
The HTML of the code is just like:
<div id="main">
<div id="content-slider"></div>
<div id="content-scroll">
<div id="content-holder">
<div class="content-item" id="item-1">item 1</div>
<div class="content-item" id="item-2">item 2</div>
<div class="content-item" id="item-3">item 3</div>
<div class="content-item" id="item-4">item 4</div>
<div class="content-item" id="item-5">item 5</div>
<div class="content-item" id="item-6">item 6</div>
<div class="content-item" id="item-7">item 7</div>
<div class="content-item" id="item-8">item 8</div>
</div>
</div>
</div>
</div>
It's OK to play with the CSS but I am looking for a solution with minimal interference with the HTML code.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
与示例的风格紧密结合,尝试如下所示: http://jsfiddle.net/GBr6e/
我已将标记排列成由两个项目组成的列,并稍微调整了 CSS。
希望这有帮助!
Working closely to the style of the example, try something like this: http://jsfiddle.net/GBr6e/
I have arranged the markup into columns consisting of two items, tweaking the css slightly.
Hope this helps!