Divs对齐顶边

Question

我使用一些divs设置了一个简单的布局，并用不同大小的图像填充它们。令人惊讶的是，它们都在图像的底部对齐 divs的大小完全相同，我希望它们彼此相邻：

我怎样才能做到这一点？
您可以在此处找到示例：http://jsfiddle.net/v7yspc6q/

这些是我的代码：

HTML code：

<div class="col">Abc
    <img src="http://lorempixel.com/400/200/">
</div>
<div class="col">Def
    <img src="http://lorempixel.com/800/600/">
</div>
<div class="col">Ghi
    <img src="http://lorempixel.com/1000/900/">
</div>
<div class="col">Jkl
    <img src="http://lorempixel.com/400/800/">
</div>

CSS代码：

div {
    border: 1px solid;
}
.col {
    display: inline-block;
    width: 100px;
    height: 200px;
}
.col img {
    max-width: 95%;
    max-height: 95%;
}

Answer 1

因为您在列上使用inline-block，所以需要定义垂直对齐方式：

.col {
  vertical-align:top;
}

JSFiddle

Answer 2

这就是你要找的东西： 添加overflow：auto到列div以隐藏div中不同大小的图像：

.col {
display: inline-block;
width: 100px;
height: 200px;
overflow:auto;

}

小提琴working example