2

这似乎是一个常见问题，但我遇到了麻烦。当我设置我的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>
4

3 回答 3

3

将图像包装在绝对位置的 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;
}

检查这个小提琴

于 2013-07-19T04:13:54.767 回答
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%);
}

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

于 2013-07-19T04:18:32.217 回答
0

<a>在您的-上设置 CSS

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

尝试这个

更新后 -

也试试这个

于 2013-07-19T04:14:23.233 回答