Can't Get Image To Align To Bottom Of Div With Foundation Block-grid Class

I am using Foundation 4.0 framework, and I have a block grid I am trying to create. Each li contains an image with a fixed width but the height is not the same for all images. I

Solution 1:

I ended up fixing this by adding float:none to the li in my css. This aligned everything, but when reducing the browser size, my images were stacking on top of each other. I then added a div inside the <li> and it seemed to then collapse correctly.

Corrected CSS:

li {
  display:inline-block;
  vertical-align: bottom;
  text-align: center;
}

Corrected HTML:

<li>
  <div>
    <a href="http://example.com">
      <img class="cover" src="image4.png">
      <p>Book 4 Title</p>
      <p>Some Cool Author</p>
    </a>
  </div>
</li>