digihows

プラスアルファを熱量込めてお届けするブログ

jQuery : 横並びの<li>要素、行ごとに高さを揃えるサンプル

スポンサーリンク

li要素の高さを、その行の高さにだけ合わせたい!

バラバラなheightの各要素を、その行で一番大きな高さの要素に合わせるjQueryサンプル 

ECサイトの商品ページなどのように、<li>要素を横並びで配置する場合があります。この時、それぞれの高さがバラバラだと、以下の様にムダなスペースが生まれてしまう事がありますね。

一番height値の大きな要素の分だけ、隙間が生まれてしまう

f:id:thablue19:20150324235253p:plain

この時、<li>要素全体で高さを合わせると、見た目は多少改善されるのですが、本来大きくする必要の無い部分まで大きくなってしまうため若干不格好です。そこで、以下の様にその行だけで適宜高さを合わせていくjQueryコードを考えました。

行で高さを揃えるjQuery

f:id:thablue19:20150324235232p:plain

1行目は「1-4」、2行目は「2-2」と、それぞれの行で一番height値の大きい要素要素に高さを揃えます。

 

ソースはこちら

 

解説:html, CSS

html部分で高さを調節したい要素ひとつひとつにclass="each_height_adjust"を付与します。この場合は、8つの<li>の高さを揃えたいので、それらすべてにこのclass属性を与えます。

<li>でなく<div>などでも良いですが、CSSでそれぞれが{float:left;}の横並び状態になっている事が前提です。

解説:JavaScript

var columns = 4; の部分の数字が、一行に含まれている要素の数(列の数)になります。こちらだけ合わせていけば、あとは自動的に class="each_height_adjust" の要素達が行毎で高さを揃えてくれます。

是非是非ご活用下さい。不明点等あればツイッターまでどうぞ。

 

 

関連記事