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

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

Contents

不揃いな横並びの複数要素のCSSの記述
jquery.matchHeight.jsを使って不揃いな横並びの複数要素の高さを揃えるのJavaScriptの記述
不揃いな横並びの要素のHTMLの記述
jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃えるデモページ
ソース元：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>