JavaScript

jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃える方法

jquery.matchHeight.jsを使って横並びの不揃いな複数要素の高さを揃える方法をご紹介します。

matchHeight.js

以下がソース元サイトです。
matchHeight

横並びの不揃いな複数要素のCSSの記述

※liタグを横並びにしてみます。必要に応じて変更して下さい。

<style type="text/css">
<!--
h1{
  text-align: center;
  padding: 10px 0;
  font-size: 18px;
}
ul{
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
ul li{
  width: 160px;
  padding: 10px;
  margin: 10px;
  float: left;
  background: #333;
  list-style: none;
  color: #fff;
  font-size: 14px;
  line-height: 1.6em;
}
-->
</style>

jquery.matchHeight.jsを使って横並びの不揃いな複数要素の高さを揃えるのJavaScriptの記述

※jquery-1.11.0.min.jsとjquery.matchHeight.jsファイルを読み込みます。不揃いな高さを揃える要素(.list)を指定します。

<script src="./jquery-1.11.0.min.js"></script>
<script src="./jquery.matchHeight.js"></script>
<script>
$(function() {
  $('.list').matchHeight();
});
</script>

横並びの不揃いな要素のHTMLの記述

※横並びにしたliタグ要素内のテキスト量をバラバラにして高さを不揃いにします。jquery.matchHeight.jsを使うことでテキスト量が違うliタグ要素の高さを揃えます。

<h1>jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃える</h1>
    <ul>
      <li class="list">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li class="list">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li class="list">テキストテキストテキストテキスト</li>
      <li class="list">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li class="list">テキスト</li>
      <li class="list">テキストテキストテキストテキスト</li>
    </ul>

jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃えるデモページ

jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃えるデモページ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。