Menyamakan Perbedaan Tinggi Setiap Elemen

Sudah dari sananya perbedaan terjadi dimana-mana. Ada yang tinggi, ada yang pendek. Begitu juga dengan penampilan visual dari elemen-elemen dalam suatu website.

Perbedaan memang bisa membawa berkah, si tinggi dan si pendek bisa saja menjadi pasangan serasi yang enak dipandang. Tapi ada kalanya juga kita ingin dan membutuhkan persamaan. Persamaan yang membuat banyak hal lebih teratur, lebih rapih dan lebih indah.

Pada gambar di atas, tampilan blok-blok konten ( postingan / artikel ) tampak berantakan karena konten teks memiliki isi yang berbeda-beda. Perbedaan jumlah karakter dan kata membuat tinggi masing-masing container menjadi berbeda.

Akan lebih baik dan elok jika blok-blok tersebut tersusu rapih seperti dibawah ini:

Salah satu cara yang sering digunakan adalah dengan mendefinisikan tinggi yang tetap (fixed) bagi setiap blok elemen dengan CSS Rule seperti: height:300px.

Cara tersebut masih menyisakan masalah dikemudian hari ketika terdapat blok yang melebih tinggi tersebut karen judul atau cuplikan isi yang lebih panjang.

Solusi JavaScript / jQuery

Untuk mendapatkan kesamaan tinggi dari blok-blok elemen yang ditumpuk dengan teknik CSS:  display:inline; float:left;

Features

1. match the heights of elements anywhere on the page
2. row aware, handles floating elements
3. responsive, automatically updates on window resize (can be throttled for performance)
4. handles mixed padding, margin, border values (even if every element has them different)
5. handles images and other media (updates automatically after loading)
6. handles hidden or none-visible elements (e.g. those inside tab controls)
7. accounts for box-sizing
8. data attributes API
9. can be removed when needed
10. maintain scroll position correctly
11. callback events
12. tested in IE8+, Chrome, Firefox, Chrome Android

http://brm.io/jquery-match-height/
http://brm.io/jquery-match-height-demo/
https://github.com/liabru/jquery-match-height