スポンサード

float を使って要素を横並びで表示する場合、「高さの異なる要素を行を揃えてキレいに表示したい！」と思いますが、
「height を固定値にして overfloe:hidden ではみ出た情報を非表示にして…なんてのはスマートじゃないし…」

という時に便利なjQueryプラグインが「jQuery.lineUp」です。

jQuery.lineUp は、横並びにした要素の高さを行毎きちんと揃えて、良い感じに並べてくれます。

jQuery.lineUp のダウンロード

以下ページより、jQuery.lineUp のファイルをダウンロードします。

ブロック要素を並べる記述例

ますはMach3.laBlog 様のブログで掲載されているレイアウトを参考にして組んでみました。

<style>
.contents {
	overflow: hidden;
}
.contents .box {
	float: left;
	width: 22.155%;
	height:auto;
	margin:2px;
	padding:1%;
	background:#f9f9f9;
}
</style>

<div class="contents">
    <div class="box">要素1</div>
    <div class="box">要素2</div>
    <div class="box">要素3</div>
    <div class="box">要素4</div>
</div>

この場合、横並びにする要素は .box ですが、高さは指定していません。

jQuery.lineUp の設置

jquery ファイルと一緒に、jquery.lineup.js ファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.lineup.js"></script>
<script>
$(".box").lineUp({
    onFontResize : false,
    onResize : true
});
</script>

$(".box").lineUp(); ですが、上記 HTML 記述例で横並びにする要素 .box に対して、高さを行毎に揃えるようにしています。

オプションに関しては、こちらのページの中段の「オプション」項目も合わせて参考にしてみてください。

data-lineup-selector 属性を使う方法

data-lineup-selector 属性に、横並びにする要素のクラス（.box）を指定するだけでも、高さを行毎に揃える事ができます。

その場合の記述はこのような感じになります。

<script src="./jquery.min.js"></script>
<script src="./jquery.lineup.js" data-lineup-selector=".box"></script>

以下に、jQuery.lineUp を利用した簡単なサンプルを用意してみました。。
jQuery.lineUp のデモ

スポンサード