DOM で jQuery キネティック プラグインを使用しています。一連の div を水平方向にスクロールするために使用します。div は正常にスクロールしますが、項目は 1 行にしかありません! 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>
「Item」クラス要素は、jQuery コードを使用して約 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 キーワードでは kinetic が機能しないため、float は対象外です。
以下は、現在の表示方法のイメージです。