zurb foundation block grid and equalizers

Question

Trying to get the zurb foundation block grid to get child elements to equalize....

<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-3"  data-equalizer>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
</ul>

Because these flow onto multiple lines, they don't seem to equal in height. My ideal would be to have the paragraph text in the 'li's in the first row to have equal heights, then the paragraph text in the 'li's in the second have their own equal heights.... but I'd also settle for them all just having the same height across all rows!

Answer 1

I updated your fiddle:

Fiddle

You need to add this code in your js:

    $(document).foundation({
equalizer: {
equalize_on_stack: true
}
});

and your css:

li{
    position:relative;

}
p{
    padding-bottom:60px;
}
.panel>:last-child{
    position:absolute;
    bottom:10px;
}