jquery - 内联显示 div 元素

Question

我在我的 DOM 中使用 jQuery kinetic 插件。我用它来水平滚动一组 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 多个元素。以下代码用于激活 kinetic 插件。

$('#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 完成此操作。我无法逐行显示元素 bt 保持滚动能力效果! float 不在表中，因为使用 float 关键字时，kinetic 不起作用。

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

Answer 1

您是否尝试修改此 - $('#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;
}

fiddle - http://jsfiddle.net/GHcb3/