- Sponsored Link -
li要素の高さを、その行の高さにだけ合わせたい！
バラバラなheightの各要素を、その行で一番大きな高さの要素に合わせるjQueryサンプル
ECサイトの商品ページなどのように、<li>要素を横並びで配置する場合があります。この時、それぞれの高さがバラバラだと、以下の様にムダなスペースが生まれてしまう事がありますね。
一番height値の大きな要素の分だけ、隙間が生まれてしまう
この時、<li>要素全体で高さを合わせると、見た目は多少改善されるのですが、本来大きくする必要の無い部分まで大きくなってしまうため若干不格好です。そこで、以下の様にその行だけで適宜高さを合わせていくjQueryコードを考えました。
行で高さを揃えるjQuery
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" の要素達が行毎で高さを揃えてくれます。
関連記事
ユーザーの心に響くWebデザイン 5つのテクニックとそれぞれの実例 - digihows
ソーシャルメディアで認知度を上げる5つの工夫と活用例 - digihows
開設1ヶ月で15000PV！ブログを一気にアクセスアップさせた5つの方法 - digihows
- Sponsored Link -