اصفهان - گلپایگان - میدان بسیج - مجتمع تجاری پارسیان - طبقه اول انتهای راهرو خدمات ژوپین پ 136
031-57453161   09130246374   @ info[at]zhupin[dot]ir  



هم اندازه کردن ارتفاع چند بلوک به کمک jquery


هم اندازه کردن ارتفاع چند بلوک به کمک Jquery

در بسیاری از موارد دیده شده است چند بلوک کنار هم داریم ولی به عللی مثلا زیاد بودن متن داخل آن ، یکی با ارتفاع بزرگ و یکی کوچک می شود

این مشکل ظاهر سایت را به کلی به هم میریزد و طراح را به چالش میکشد

 

در تصویر زیر یک نمونه می بینید 

هم اندازه کردن ارتفاع چند بلوک

 

خوب بدترین مشکلی که ایجاد میشود در حالت رسپانسیو و بوت استرپ هست که کلا ظاهر سایت را به هم میریزد

 هم اندازه کردن ارتفاع چند بلوک همیشه جالب نیست و برای اخلاف ارتفاع بین 20 تا70 پیکسل مناسب است و برای ارتفاعات بیشتر کار جالبی نیست 

برای هم اندازه کردن ارتفاع چند بلوک کنار هم  بهتر است بزرگترین ارتفاع را بگیریم و بقیه را با آن تنظیم کنیم

 

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

ابتدا همه بلوک ها باید یک کلاس داشته باشند که ما مثلا گذاشتیم block_class 

<script>
/*  هم اندازه کردن ارتفاع چند بلوک */
$(document).ready(function(){

var b_max = 0;

var mdv = $('.block_class');

if(mdv.length){

$.each(mdv,function(k,v){

if($(v).heigth() > b_max){
b_max = $(v).heigth();
}


});

$('.block_class').height(b_max);


}





});

</script>

 

# هم اندازه کردن ارتفاع چند بلوک

 موفق باشید.


1396/06/18 3:46:48      طراحی سایت    463 بار    اشتراک در تلگرام    http://www.zhupin.ir/post/21

نظرات

دیدگاهی یافت نشد

کد امنیتی :

خلیج ..... ؟