Vertically aligning images in floated elements - html

Question

I'm trying to vertical align some images to the bottom in floated elements, and I can't seem to get it to cooperate.
Here is a JSFiddle with an example. You can see they are aligning to the top.
http://jsfiddle.net/decr9gfj/1/
Some Code:
<ul class="clearfix">
<li><img src="http://fpoimg.com/100x150"></li>
<li><img src="http://fpoimg.com/100x100"></li>
<li><img src="http://fpoimg.com/100x75"></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;
}

Answer 1

Remove the float on the list items and add display:inline-block.
li {
display:inline-block;
padding:0px 5px;
}
jsFiddle example
ul {
list-style-type:none;
margin:0;
padding:0;
background:#eee;
display: block;
vertical-align:bottom;
}
li {
display:inline-block;
padding:0px 5px;
}
a {
display:block;
}
img {
display:block;
vertical-align:bottom;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
<ul class="clearfix">
<li><img src="http://fpoimg.com/100x150">
</li>
<li><img src="http://fpoimg.com/100x100">
</li>
<li><img src="http://fpoimg.com/100x75">
</li>
</ul>