Cara Membuat Kolom Sama Tinggi dengan jQuery matchHeight
Cara Membuat Kolom Sama Tinggi dengan jQuery matchHeight - Desain yang bagus dan juga menarik pada halaman website adalah hal paling utama yang perlu diperhatikan, mulai dari layout, warna dan lain sebagainya. Nah, berbicara mengenai layout pada website tentunya tidak lepas dari yang namanya ukuran lebar dan tinggi baik pada pembagian kolom - kolom maupun pada elemen yang lainnya. Terkadang kita suka melihat ukuran tinggi pada kolom - kolom tidak sama rata dan ini menjadikan sedikit kurang bagus untuk layoutnya.
Ada beberapa cara untuk membuat kolom - kolom tingginya sama, bisa diatur pada CSS dan atau bisa dengan plugin. Seperti plugin yang akan saya rekomendasikan agar kolom - kolom tingginya menjadi sama yaitu dengan matchHeight. Berikut akan saya bahas bagaimana Cara Membuat Kolom Sama Tinggi dengan jQuery matchHeight.
Baiklah, kita mulai dengan membuat kolom - kolomnya terlebih dahulu, silahkan kalian bisa ketikan kode HTML untuk membuat struktur kolom - kolom dan tambahkan juga beberapa paragraf disetiap kolomnya dengan panjang paragraf yang berbeda.
<div class="container">
<div class="card-1">
<h2>Repellat laborum</h2>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Learn More</a>
</div>
<div class="card-2">
<h2>Facere iure</h2>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Learn More</a>
</div>
<div class="card-3">
<h2>Corporis quasi</h2>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Learn More</a>
</div>
</div>
</body>
Setelah itu, tambahkan kode CSS berikut untuk mengatur layout kolom - kolom dan meberikan perbedaan warna pada kolom agar bisa terlihat dengan jelas kolom - kolomnya.
* {padding: 0; margin: 0;}
.container {
width: 950px;
margin: auto;
background: #2C3A47;
overflow: hidden;
padding: 10px;
font-family: 'Heebo', sans-serif;
margin-top: 30px;
}
.card-1 {background-color: #EAB543; padding: 15px 30px; float: left; width: 250px; text-align: justify; }
.card-2 {background-color: #55E6C1; padding: 15px 30px; float: left; width: 250px; text-align: justify; margin-left: 10px; }
.card-3 {background-color: #FC427B; padding: 15px 30px; float: right; width: 250px; text-align: justify; }
a {background: #F8EFBA; padding: 5px;}
p {margin: 20px 0;}
Setelah kalian ketikan kode HTML dan CSS diatas, maka hasil sementara kolom - kolom akan terlihat seperti berikut.
Sekarang, kita akan membuat agar kolom - kolom diatas menjadi tingginya sama dengan jQuery matchHeight, silahkan kalian bisa tambahkan kode jQuery berikut dibagian bawah setelah tag body.
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/jquery.matchHeight-min.js"></script>
<script>
$(document).ready(function() {
$('.card-1, .card-2, .card-3').matchHeight();
});
</script>
Setelah itu silahkan buka kembali hasil akhirnya akan terlihat seperti gambar dibawah ini.
Nah, itulah cara agar kolom - kolom menjadi sama tingginya dengan jQuery matchHeight, cukup sekian pembahasan kali ini semoga bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
