Equals heights of thumbnails

Question

I have 3 thumbnail span3 elements per Twitter Bootstrap row but the the <p> text is variable which breaks the layout. How could I set each thumbnail to be the height of the largest thumbnail so that they flow correctly?

<div class="box_line" style="float: left; border: 1px solid red;">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt=""/>
    <div class="caption">
      <h5>Thumbnail label</h5>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
</div>

I haven't found a working jQuery plugin to do this and the solution in this topic doesn't work for me either.

Answer 1

try this fiddle : http://jsfiddle.net/PbfpU/2/ (I used the script you linked in the comments)

anyway be sure to call that function only after all thumbnails have been loaded, otherwise you could get wrong values.

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

Answer 2

I know I'm late to the party, but here's a handy variation on Fabrizio's answer, wrapped up as a jQuery plugin:

(function($) {
    $.fn.uniformHeight = function() {
        var maxHeight   = 0,
            max         = Math.max;

        return this.each(function() {
            maxHeight = max(maxHeight, $(this).height());
        }).height(maxHeight);
    }
})(jQuery);

...and to use it:

$(".thumbnails").find(".thumbnail").uniformHeight();

Also, if your thumbnails contain images, make sure to call this after the window load event has fired.