2列横並びで多数の要素をリスト化します。
(左右2列×複数行 )
その要素は動的にソートを行うのですが(金額・名前・優先順位)
ソート後、横並び二つの要素の高さを揃えたいです。
ページを読み込み直す事なく。
table・table-cellの使用を考えております。
table-cellを使用すると要素が全て一列横に並んでしまうのですが、
ソート後にtable-rowをもつ要素で2つずつ囲う方法が分からず
困っています。
Flexboxを使用すると下記のような形でソートできるのですが、
table・table-cellを用いても同様なソートは可能でしょうか。
・ソート
・ソート後要素二つ毎に高さを揃える
・要素2つ事に文言が入るのでul liは使用できない
こちらでアドバイスをいただけますと幸いです。
どうぞ、宜しくお願い致します。
IE8まで対応・jqueryは 1.12.4 を使用予定です。
サンプルソースは下記です。
<div class="list_outer"> <div class="product"> <div class="name">E</div> <div class="price">1,000</div> <div class="txt2">test test test test test test test test test test test test test test test test test test test test </div> </div> <div class="product"> <div class="name">F</div> <div class="price">2,000</div> </div> <div class="product"> <div class="name">G</div> <div class="price">500</div> </div> <div class="product"> <div class="name">H</div> <div class="price">1,500</div> </div> <div class="product"> <div class="name">I</div> <div class="price">3,000</div> </div> <div class="product"> <div class="name">JK</div> <div class="price">50</div> </div> <div class="product"> <div class="name">J</div> <div class="price">4,000</div> </div> <div class="product"> <div class="name">L</div> <div class="price">2,500</div> <div class="txt2">test </div> </div> <div class="product"> <div class="name">A</div> <div class="price">1,000</div> <div class="txt2">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> </div> <div class="product"> <div class="name">AB</div> <div class="price">2,000</div> </div> <div class="product"> <div class="name">C</div> <div class="price">500</div> <div class="txt2">test test test test test test test test test test test test test test test </div> </div> <div class="product"> <div class="name">D</div> <div class="price">1,500</div> </div> </div>回答2件
あなたの回答
tips
プレビュー