یکی از ساده ترین روش یکسان سازی ارتفاع باکس های یک شکل+ویدیو

مسئله چیست؟

یکسان سازی ارتفاع باکس ها در صفحه ساز ها و عدم یک شکل بودن برخی باکس ها به علت طول محتوایشان یکی از چالش های طراحی می باشد. همیشه وقتی اسلایدر محصول، اسلایدر پست ها و… هر چیز دیگه ای که ایجاد می کنیم اگه محتوای هر آیتم برابر باشه که خب هیچی مشکلی نداریم اما اگه طول محتوای متنی یا ارتفاع یک عکس بیشتر از حد معمول باشه یا ابعاد متفاوت باشند با این مشکل بهم ریختگی همیشه رو به رو هستیم.

برای رفع این مشکل نیاز به کار سختی نیست و به CSS هم اصلا نیازی نداریم. فقط کافیه فایل زیر رو دانلود کنید و طبق آموزشی که توی ویدیو در اختیارتون میزارم پیش برید.

بریم سراغ حل مشکل

1- خب اول از همه طبق آموزش فایل زیر رو دانلود(یا مثل من کپی)کنید. دانلود

https://github.com/liabru/jquery-match-height/blob/master/jquery.matchHeight.js

2- فایل رو به قالب اضافه کنید . ( اگه نمیدونید چطوری اضافه میشه حتما آموزش اضافه کردن اسکریپت دلخواه رو ببینید).

3- بعدش هم کد زیر رو دقیقا همونجایی که من به فایل اضافه کردم شما هم اضافه کنید.

$('.product-wrapper').matchHeight(
        {
            byRow : true ,
            property: 'height',
            target: null,
            remove : false,
        }
    )

4- حالا به جای اون product-wrapper شما نام کلاس خودتون رو بنویسید.

به همین راحتی 🙂

آموزش هایی که بهتر است مشاهده کنید.