html - 将图像与页面底部对齐

Question

这似乎是一个常见问题，但我遇到了麻烦。当我用

设置我的 css 时

position: absolute; 
bottom: 0;

，我所有的图像最终都相互重叠，而不是在底部并排显示。我该如何解决这个问题？

编辑:我无法将它们封装在自己的 div 中，因为单击时，目标图像应该位于页面顶部

:target{
 position:absolute; 
 top:0
}

编辑:代码:: http://jsfiddle.net/5MXLb/

div#main{
    text-align: center;
}

.gallery{
    display: inline-block;
    height: 100%;
}

.gallery img{
    display: inline-block;
    max-height: 10%;
    bottom: 0;
    position: absolute;

}
.gallery img:target{
    position: relative;
    top: 0;
    max-height: 90%;
}

HTML:

<div id="main">
        <div class="gallery">
            <a href="#img1"><img id="img1" src="http://placehold.it/200" /></a>
            <a href="#img2"><img id="img2" src="http://placehold.it/400" /></a>
            <a href="#img3"><img id="img3" src="http://placehold.it/600" /></a>
            <a href="#img4"><img id="img4" src="http://placehold.it/800" /></a>
            <a href="#img5"><img id="img5" src="http://placehold.it/1000" /></a>
        </div>
        </div>

Answer 1

将图像包裹在绝对定位的 div 中，并将其放置在底部

<div>
    <img src="http://dummyimage.com/100x100/000/ff0000" />
    <img src="http://dummyimage.com/100x100/000/ff0000" />
</div>

CSS:

div {
    width:100%;
    position: absolute;
    bottom:0;
}
img {
    position: relative;
    display: block;
    float: left;
}

检查这个fiddle