Question

我希望使用JQuery创建与div相同的高度和行。我被卡住了！

关于如何使第一行等于第二行的任何想法？我发现了一个我想要的例子here，当您取消“按行”时，所有行都变得相等。只是不确定如何。

jQuery(document).ready(function($) {

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}


$(window).load(function() {
  equalheight('.main article');
});

$(window).resize(function(){
  equalheight(' article');
});
	});

.landingpage .main article {
  float: left;
  width: 29.33%;
  background: #ccc;
  margin: 10px 1%;
  padding: 1%;
}

@media all and (max-width: 800px) {
.landingpage .main article {
    width: 100%
  }

<div class="landingpage">
<section class="main">
  <article>CPR & AED Classes <BR>1 </article>
  <article>CPR & First Aid Classes</article>
  <article>BLS Classes<BR>1</article>
  <article>EMSA Pediatric Classes</article>
  
    <article>Instructor Training  </article>
  <article>Water Safety<BR>1<BR>1</article>
  
</section>

</div>

Answer 1

试试这个

$(document).ready(function(){
    maxheight=0;
    $('.main article').each(function(){
        maxheight = $(this).height() > maxheight ? $(this).height() : maxheight;
    })
    $('.main article').height(maxheight);
});

这将使所有行高度与行的最大高度相同

<强> working example

JQuery等高度行

1 个答案: