JQuery Equal Heights Tests
HTML
<script src="http://www.cssnewbie.com/download/jquery.equalheights.js"></script>
<div class="item-list row-1">
<h2>Row 1</H2>
<ul>
<li><img src="http://lorempixel.com/150/256/nature/1/"></li>
<li><img src="http://lorempixel.com/150/220/nature/3/"></li>
<li><img src="http://lorempixel.com/150/190/nature/8/"></li>
</ul>
</div>
<div class="item-list row-2">
<h2>Row 2</H2>
<ul>
<li><img src="http://lorempixel.com/150/152/nature/4/"></li>
<li><img src="http://lorempixel.com/150/120/nature/7/"></li>
<li><img src="http://lorempixel.com/150/135/nature/10/"></li>
</ul>
</div>
CSS
li {
float: left;
margin-right: 5px;
background-color: lightBlue;
}
.item-list {
clear: both;
float: none;
}
JavaScript
// Apply heights to li ags within UL groups.
$(".item-list ul").each(function() {
$(this).find('li').equalHeights();
});