こんにちは、クリエイティブフレークです。
divタグやリストタグで、横並びボックスを作ったときに、高さがマチマチで不格好…ってことはありませんか?
もちろんCSSでも解決できるのですが、今回はjQueryを使って超簡単に解決したいと思います。
▲こんな感じでしょうか
今回使用するのはThe EqualHeights jQuery Pluginというプラグインになります。
サイトからダウンロードをしたら、いつものようにHTMLのhead内にjQueryとダウンロードしたjsを読み込みます。
記述するjsですが、↓↓↓たったのこれだけ↓↓↓です。
今回はHTML内の対象となるボックスをdivで作成し、そのクラス名をblockとしています。
なので、クラス名やID名は適宜変更してください。
【DEMO】デモはこちらから
【DL】デモサイトコードの一括ダウンロードはこちら
divタグやリストタグで、横並びボックスを作ったときに、高さがマチマチで不格好…ってことはありませんか?
もちろんCSSでも解決できるのですが、今回はjQueryを使って超簡単に解決したいと思います。
▲こんな感じでしょうか
今回使用するのはThe EqualHeights jQuery Pluginというプラグインになります。
サイトからダウンロードをしたら、いつものようにHTMLのhead内にjQueryとダウンロードしたjsを読み込みます。
記述するjsですが、↓↓↓たったのこれだけ↓↓↓です。
$(document).ready(function() {
$(".block").equalHeights();
});
今回はHTML内の対象となるボックスをdivで作成し、そのクラス名をblockとしています。
なので、クラス名やID名は適宜変更してください。
【DEMO】デモはこちらから
【DL】デモサイトコードの一括ダウンロードはこちら
Written by Creative Flake
コメント
コメントを投稿