
Javascript ile Kutu (div) Boyutlarını Eşitleme
Bir çok Front-End Developer’ın karşılaşmış olduğu sorunlardan bir tanesi içerik girişi yapılmış divlerin boy orantılarının birbirinden farklık göstermesidir. Tasarımcı metin alanlarının hepsinin eşit olacağını hayal eder ve ortaya yan yana sıralanmış eşit uzunlukta aynı karakter sayısına sahip kutular oluşturur, ama bu kutuların içerisine gerçek içerikler girilmeye başlandığında hayal edilen ile gerçekleşen yapı aynı değildir,uzunlu kısalı kutular tasarım bütünlüğünden ve görselliğinden artık kopmuş , tasarımdaki güzelliği yansıtamaz hale gelmiş ve sonunda mutusuz bir müşteri profili orataya çıkmıştır. Akla ilk gelen çözümlerden bir tanesi ; kutu boylarına eşit uzunluk verip ( height:150px) taşma alanlarını gizlemek (overflow:hidden) gelebilir ama buda kullanıcılara anlamsız yerde kalan içerikler oluşturacaktır, ikinci yöntem sabit karakter sınırlaması; yani bu div içine max karekter basmak olacaktır, sonuç ilk yöntem ile aynı, anlamsız içerik. Peki ya çözüm?..
Çözümlerden bir tanesi en uzun içeriğe sahip divi baz alıp diğer divlerin boylarını eşitlemek olabilir…
Şimdi sizlere bu yöntemden bahsedeceğiz..
Javascript Kodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function ($) { // ----------------------------------------------------- MaxHeight $(".max_h_c").each(function(j,d) { var maxHeight = 0; $(d).find('.max_h').each(function (i,e) { if(maxHeight < $(e).height()) maxHeight = $(e).height(); }); $(d).find('.max_h').height(maxHeight); }); });//-- End Ready |
Html Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<div class="container max_h_c"> <!-- Item 1--> <div class="box"> <figure> <img src="img/img1.jpg" alt="imgName"> </figure> <div class="box-content max_h"> <h3>Lorem Ipsum</h3> <p> Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus. </p> </div> </div><!-- Item End--> <!-- Item 2--> <div class="box"> <figure> <img src="img/img3.jpg" alt="imgName"> </figure> <div class="box-content max_h"> <h3>Lorem Ipsum</h3> <p> Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus. </p> </div> </div><!-- Item End--> <!-- Item 3--> <div class="box"> <figure> <img src="img/img3.jpg" alt="imgName"> </figure> <div class="box-content max_h"> <h3>Lorem Ipsum</h3> <p> Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus. </p> </div> </div><!-- Item End--> </div> |
Örnek
See the Pen pJwNQG by MinimalCoding (@MinimalCoding) on CodePen.
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.