выравнивание изображений разного размера внизу

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; 

}