0

我在我的 DOM 中使用 jQuery 动力学插件。我用它来水平滚动一组 div。div 滚动良好，但项目仅在一行中！我试图让 div 逐行显示。下面是 HTML 元素层次结构。

<div id="item-tab-1">
    <!-- Item List -->
    <div id="item-list-section">
        <div class="item">
             <!-- Item Price -->
             <div class="item-price">
                  <h4>25.00</h4>
             </div>

             <!-- Item Name -->
             <div class="item-name">
                  <h4>DRINK</h4>
             </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="clear"></div>
</div>

使用 jQuery 代码将“Item”类元素复制大约 100 次。因此，根据脚本，在运行时可以有 100 多个元素。以下代码用于激活动力学插件。

$('#item-list-section').kinetic({y:false,x:true});

下面是我在元素中使用的 CSS。

#item-list-section {
    width: inherit;
    height: 423px;
    overflow: hidden;
    white-space: nowrap;
    float: none;
    display: table;

}

#item-tab-1{
    cursor: move;
}


.item {
    height: 70px;
    width: 80px;
    margin: 15px 0px 0px 20px;
    float: left;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgb(75, 75, 75);
    display: -webkit-inline-box;
}

如何使用 CSS 完成这项工作。我无法逐行显示元素以保持滚动能力效果！Float 不在表中，因为使用 float 关键字，动力学不起作用。

下面是关于它现在如何显示的图像。

在此处输入图像描述

4

2 回答 2

0

您是否尝试修改此 - $('#item-list-section').kinetic({y:false,x:true});？

我不知道你的插件，但似乎有一个选项可以“打开”垂直滚动（或者也可以是垂直布局）。将该行设置为 -

$('#item-list-section').kinetic({y:true,x:false});

编辑：

修改这个 -

#item-list-section {
width: inherit;
height: 423px;
overflow: hidden;
white-space: nowrap;
float: none;
display: table;
}

对此——

#item-list-section {
width: inherit;
height: 423px;
overflow: scroll;
white-space: nowrap;
float: none;
display: table;
}

小提琴 - http://jsfiddle.net/GHcb3/

于 2013-07-17T04:41:36.917 回答
0

更改#list-item-section{ overflow: hidden }为#list-item-section{ overflow: scroll} 这应该显示水平滚动条。

于 2013-07-18T19:57:55.087 回答