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

228
2
زمان مطالعه: < 1 دقیقه

مسئله چیست؟

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

برای رفع این مشکل نیاز به کار سختی نیست و به 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 شما نام کلاس خودتون رو بنویسید.

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

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

مطلب پیشنهادی : چگونه با PHPstorm به لوکال هاست متصل شویم؟؟؟
مطلب پیشنهادی : تم چایلد (Child Theme) چیست؟ +ویدیو
مطلب پیشنهادی : بهینه ترین روش افزودن فایل CSS و Script دلخواه در وردپرس+ویدیو

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

  1. چجوری میشه یکاری کرد که قیمت ها هم با هم تو یک ردیف قرار بگیرن وبالا پایین نباشن؟