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

Answer 2

如果您只定位较新的浏览器，则可以使用flexbox。 http://jsfiddle.net/5MXLb/1/

我只包含-webkit前缀版本。

div#main{
    text-align: center;
    height: 100%;
}
html, body { height: 100%; }
.gallery{
    display: -webkit-flex;
    height: 100%;
    -webkit-align-items: flex-end;
    -webkit-justify-content: center;
}
/* this stops the shrinking of the items */
.gallery a {
    -webkit-flex-shrink: 0;
}

.gallery img{
    display: inline-block;
    max-height: 10%;

}
.gallery img:target{
    position: absolute;
    top: 0;
    max-height: 90%;
    left: 50%;
    -webkit-transform: translateX(-50%);
}

但我认为这可以满足您的需求。

Answer 3

在<a> -

上设置CSS

.gallery a{
    display: inline-block;
    margin-right: 20px;
    width:30px;    
}

Try This

更新后 -

Try This also

将图像对齐到页面底部

3 个答案: