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

将它们放在一个位置为relative的容器中;

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

}

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

3 个答案: