آموزش یکسان سازی ارتفاع ستون‌ها در طراحی سایت

رعایت برخی نکات ریز در طراحی سایت باعث افزایش زیبایی و کارایی سایت خواهند شد، یکی از این نکته‌ها، یکسان بودن ارتفاع ستون‌های موجود در سایت است که در حالت پیش‌فرض ارتفاع آن‌ها بر اساس محتوای داخلی تعیین می‌شود. در ادامه انواع روش‌های مختلف برای یکسان کردن ارتفاع ستون‌های سایت را بررسی خواهیم کرد.

ستون‌های طراحی سایت با ارتفاع یکسان

روش اول: با استفاده از کتابخانه‌ی جی‌کوئری

ابتدا jQuery را در سایت فراخوانی کنید:

برای این منظور به ستون‌ها (div) کلاس blocks را بدهید و کدهای جاوااسکریپت زیر را به محتوای صفحه اضافه کنید.

دانلود equalheight.js

روش دوم: با استفاده از CSS

چنانچه به دلایل مختلف استفاده از جاوااسکریپت یا jQuery برای انجام این کار مناسب نباشد، می‌توان به شیوه‌ی زیر و تنها با استفاده از CSS به نتیجه دست پیدا نمود.

در این روش، عنصر والد که ستون‌ها را در خود نگهداری می‌کند، می‌بایست این ویژگی CSS را داشته باشند.

عناصر داخلی که می‌بایست ارتفاعی ثابت داشته باشند نیز کد CSS زیر را در خود خواهند داشت.

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

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

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱