css - 将不同大小的图像对齐到底部

Question

我有一系列浮动图像，每个都有不同的大小，我怎样才能使图像对齐到底部，而不是顶部，我尝试了垂直对齐，但它不是 wotking。

代码是这样的：

<div id="ngg-image-194" class="ngg-gallery-thumbnail-box"
    <div class="ngg-gallery-thumbnail">
        <img .... > </img>
   </div>
</div>
<div id="ngg-image-195" class="ngg-gallery-thumbnail-box"
    <div class="ngg-gallery-thumbnail">
        <img .... > </img>
   </div>
</div>
and so on .............

CSS是这样的：

.ngg-gallery-thumbnail-box {
    float: left;
}
.ngg-gallery-thumbnail img {
height: auto;
}
#ngg-image-194 img {
width: 100px ;
}
#ngg-image-195 img {
width: 140px ;
}
and so on .............

Answer 1

你有能力改变吗？

.ngg-gallery-thumbnail-box {
    float: left;
}

至：

.ngg-gallery-thumbnail-box {
    display:inline-block;
}

如果是这样，图像将与底部对齐

Answer 2

好吧，有一个 css 技巧可以将元素保持在底部：

.class{
  position : absolute;
  bottom:0px;
}

Answer 3

将它们放在具有位置的容器中：相对；

<div id="container">

<div id="ngg-image-194" class="ngg-gallery-thumbnail-box box">
    <div class="ngg-gallery-thumbnail">
        <img .... > </img>
   </div>
</div>
<div id="ngg-image-195" class="ngg-gallery-thumbnail-box box">
    <div class="ngg-gallery-thumbnail">
        <img .... > </img>
   </div>
</div>

</div>
#container {
   position:relative;
   width:900px;
   height:900px;
}
.box {
position:absolute;
bottom:0px;
float:left;
margin-right:15px;

}