html - 垂直对齐 float 元素中的图像

Question

我试图将 float 元素中的一些图像垂直对齐到底部，但我似乎无法让它配合。

这是一个带有示例的 JSFiddle。您可以看到它们与顶部对齐。

http://jsfiddle.net/decr9gfj/1/

一些代码:

<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;
}

Answer 1

删除列表项上的 float 并添加 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><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>