طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت ستون های هم اندازه داینامیک با jQuery


ساخت ستون های هم اندازه بصورت داینامیک با jQuery

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

ما می توانیم بصورت داینامیک با jQuery به ساخت ستون های هم اندازه بپردازیم.

ما یک مثال از یک قالب دو-ستونه داریم. طول محتویات این دو قالب متفاوت از همدیگر هستند. ما قصد داریم این ارتفاع این ستون ها راه با جی کوئری برابر کنیم.

ساخت ستون های هم اندازه بصورت داینامیک با jQuery

قالب HTML دو ستونه

این کد به شما دو ستون با ارتفاع نابرابر را نشان می دهد.

و استایل های CSS :

کد jQuery ساخت ستون های هم اندازه بصورت داینامیک

این کد jQuery ارتفاع محتوای هر دو بخش اصلی و کناری را مقایسه و ارتفاع بزرگتر را به عنوان ارتفاع اصلی در نظر می گیرد. سپس بر روی ستون بعدی این ارتفاع بزرگتر را اعمال می کند.

حتما بخوانید  معرفی متدهای ایجکس در jQuery - بخش اول

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

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه