NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

レスポンシブWebデザインに対応した要素の高さを揃える「jquery.heightLine.js」

2013年12月11日jQueryプラグイン活用

レスポンシブWebデザインに対応した要素の高さを揃える「jquery.heightLine.js」

jQueryプラグイン「jquery.heightLine.js」を使うことで、横に並んだ要素の高さを揃えることができます。レスポンシブWebデザインにも対応した機能が揃っています。

デモページ

JavaScript

(function($){
	$(function() {
		$('#contents>.box').heightLine({
			fontSizeCheck: true
		});
	});
})(jQuery);

HTML

<div id="contents">
	<div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
	<div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</div>

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. レスポンシブWebデザインに対応した要素の高さを揃える「jquery.heightLine.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com