I'm struggling to vertically align some images to the bottom within floated elements, and I just can't seem to make it work.
Check out this JSFiddle example. You'll notice that the images are currently aligned to the top.
http://jsfiddle.net/decr9gfj/1/
Here is a snippet of the code in question:
<ul class="clearfix">
<li><a href="#"><img src="http://fpoimg.com/100x150"></a></li>
<li><a href="#"><img src="http://fpoimg.com/100x100"></a></li>
<li><a href="#"><img src="http://fpoimg.com/100x75"></a></li>
</ul>
ul {
list-style-type:none;
margin:0;
padding:0;
background:#eee;
display: block;
vertical-align:bottom;
}
li {
float:left;
padding:0px 5px;
}
a {
display:block;
}
img {
display:block;
vertical-align:bottom;
}