多行水平 Jquery 滚动条

发布于 2024-11-26 20:30:12 字数 1267 浏览 0 评论 0原文

我需要一个两行的滑块,在某种程度上是可能的,但这不是我需要的。这是交易;

根据 教程 我可以排队水平多个div。

但如果我需要两行,那么它会对这样的项目进行排序:

Wrong order

而我需要的是这样的:

正确顺序

(灰色区域不可见)

解决此问题的正确方法是什么?

代码的 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:

Wrong order

While what I need is this:

Correct order

(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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

奢华的一滴泪 2024-12-03 20:30:12

与示例的风格紧密结合,尝试如下所示: 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!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文