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. 

<body>
    <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.

@import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');
    * {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.

Cara Membuat Kolom Sama Tinggi dengan jQuery matchHeight

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://code.jquery.com/jquery-3.4.1.min.js"></script>
<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.

Cara Membuat Kolom Sama Tinggi dengan jQuery matchHeight

Nah, itulah cara agar kolom - kolom menjadi sama tingginya dengan jQuery matchHeight, cukup sekian pembahasan kali ini semoga bermanfaat dan selamat mencoba :)

27 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat