Reputation: 878
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 need the images and text to align to the bottom of the div. Below is my html. I have tried changing the parent div to position relative and position absolute, but cannot get anything to work. Any help is greatly appreciated.
CSS:
li {
display:inline-block;
vertical-align: bottom;
text-align: center;
}
img {
max-width: 127px;
height: auto;
margin-bottom: 0.7em;
}
// All other styles are defined by the ul.large-block-grid-4 within Foundation.
HTML:
<div class="card-shadow-wrapper">
<ul class="small-block-grid-2 large-block-grid-4">
<li>
<a href="http://example.com">
<img class="cover" src="image1.png">
<p>Book 1 Title</p>
<p>Some Cool Author</p>
</a>
</li>
<li>
<a href="http://example.com">
<img class="cover" src="image2.png">
<p>Book 2 Title</p>
<p>Some Cool Author</p>
</a>
</li>
<li>
<a href="http://example.com">
<img class="cover" src="image3.png">
<p>Book 3 Title</p>
<p>Some Cool Author</p>
</a>
</li>
<li>
<a href="http://example.com">
<img class="cover" src="image4.png">
<p>Book 4 Title</p>
<p>Some Cool Author</p>
</a>
</li>
</ul>
</div>
Upvotes: 1
Views: 4999
Reputation: 878
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>
Upvotes: 1