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 に答える
0

あなたにCSSを設定してください<a>-

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

これを試して

更新後 -

これも試してみてください

于 2013-07-19T04:14:23.233 に答える