トップ 16,500円～

要素の高さをそろえる

ウェブサイト制作では横並びの要素の高さをそろえたい場面が頻繁にあります。
商品一覧もそうですし、ヘッダー・フッターメニューもよく見ると要素の横並びになっています。そういう場合において、高さをそろえないとレイアウトが崩れることがあります。
商品の横並びはその代表例です。

たとえば、トップページのランキングやおすすめ商品など、商品を並べているところは画像の高さや文字数などが原因でレイアウトが崩れることがあります（下画像では、紫の画像が縦長なのが原因）。

並べ方の知識については以前記事にまとめましたので、興味があればご参照ください。
昨今ですとCSSフレックスボックスを使うことも考えられますが、古いブラウザでは対応していないこともあります。

カラーミーでレイアウトするHTML・CSS知識と役立つ豆知識

jquery.tile.jsの機能概要

カラーミーショップのテンプレート（MODEやPanoramaなどの有料テンプレート）では、古いブラウザでもレイアウト崩れを起こしにくいjquery.tile.jsを使っています。

jquery.tile.jsは横並び要素の高さを取得して、最も大きい値を横並び要素すべてにheightで指定することで、高さをそろえています。
事前の設定として、ブラウザの幅ごとに横並びの要素がいくつあるか（下例の場合だと3）をパラメータで指示してやる必要があります（jquery.tile.jsの使い方を検索）。

横並び数を未設定の場合は、含まれる全要素で高さ最大を基準にして高さをそろえます（こちらのほうが断然かんたん）。

カスタマイズしていて、よく遭遇する崩れ方

ご自身で有料テンプレートをカスタマイズしている場合に、横並び数を変更したいことがよくあります。
具体的には、col-lg-3 → clo-lg-4にカスタマイズした際に、レイアウトが崩れたなんて話をよく聞きます。
そういう場合は、jquery.tile.jsの設定も見直しが必要です。

jQuery、JavaScriptの作業になりますので、不慣れな方はご自身での対応は難しいと思います。