html - 固定大小的图像容器

Question

我有以下图像容器：

<div class="images">
    <img src="<%=imageURL %>" />
</div>

而css.images是：

.images{
display:inline-block;
width:100px;
height:133px;
overflow:hidden;
}

我的图像尺寸不同，这就是为什么我使用上面的 div 胶囊使它们大小相同。但是在页面中，我的图像是这样的：

它们的顶部没有对齐。我该如何纠正？

Answer 1

添加vertical-align:top

.images{
    display:inline-block;
    width:100px;
    height:133px;
    overflow:hidden;
    vertical-align:top
}

Answer 2

使用浮动

.images{
       float:left;
       width:100px;
       height:133px;
       overflow:hidden;
      }