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

我有一系列浮动图像，每个都有不同的大小，我怎样才能使图像对齐到底部，而不是顶部，我尝试垂直对齐，但它不是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 .............

来源

2013-08-21 Botond Vajna

我觉得工作拨弄*或**仓可以为您提供更好的响应，并加上小费，那''标签是自我封闭。 * http://jsfiddle.net/ ** http://jsbin.com –

你能够改变？

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

到：

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

图像将调整至底部，如果这样

来源

2013-08-21 10:43:56

什么？由于'display：inline block'导致元素粘在底部？ – Itay

是的，这是工作，谢谢 –

哈哈，不是CSS充满惊喜。这不是底部，而是底线;但你可以用'vertical-align'来改变它... –

以及有一个CSS技巧，以保持要素在底部：

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

来源

2013-08-21 10:45:03

把它们放在一个有位置的容器：相对;

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

}

来源

2013-08-21 10:49:37

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

回答

相关问题