JavaScript

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

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

不揃いな横並びの複数要素の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ファイルを読み込みます。不揃いな高さを揃えるliタグ要素(.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を使って横並びの不揃いな要素の高さを揃えるデモページ

ソース元:matchHeight.js

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

 

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