[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox

異なる高さのdiv要素の高さを揃えて表示するシンプルなjQueryのプラグインを紹介します。

Equalbox.js
デモページ

[ad#ad-2]

Equalbox.jsの実装

HTML

各div要素はjQueryのセレクタで指定できるように、idなどを指定します。

    <div id="box-container">
    
        <div id="box1" class="box">
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>

            <p>dsfsdfsdfsdf</p>      
        </div>
        
        <div id="box2" class="box">
            <p>dsfsdfsdfsdf</p>
        </div>
        
        <div id="box3" class="box">
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>

            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>
            <p>dsfsdfsdfsdf</p>
        </div>

    
    </div>

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。

        $(document).ready(function() {            
            $("#box1,#box3,#box2").equalbox();            
        });

[ad#ad-2]