Question

我用jquery灯光箱提炼了几年前的lu。

<div class="p">
    <ul class="gallery">
        <li><a rel="lightbox-gallery" href="..."><img src="..."></a></li>
        <li>...</li>
    </ul>
</div>

div.p {
    text-align: justify;
}

.gallery li {
    display: inline;
    list-style-type: none;
}

或许这并不完美,但它甚至在整个一栏中都有空间,并且自行调整窗口。

现在,有近40个剂量,我想增加 > 。 a 略微超支,有照相号码,例如:

但是,我感到有些麻烦,因为一些因素行不通,而不是阻碍。

能否做到这一点?

Answer 1

<编码>沉积:绝对值;将切入。 <代码><li>需要position: relative。

Demo:

传真:

<ul>
    <li><a><img class="thumbnail" /></a><div class="number">1</div></li>
    <li><a><img class="thumbnail" /></a><div class="number">2</div></li>
</ul>

CSS:

.thumbnail
{
    border: 1px solid black; 
    display: inline-block;   
    height: 60px;
    width: 60px;
    vertical-align: top;
}
li
{
    display: inline-block;
    position: relative;
}
.number
{
    background-color: rgba( 47, 47, 47, .3);
    bottom: 0;
    height: 18px;
    line-height: 18px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 18px;
    z-index: 1;
}

Answer 2

http://jqueryui.com/demos/position/“rel=“nofollow”>position plugin 。它可以帮助你这样做。

Answer 3

In this demo, I added this bit of code:

$(function(){
    $( .gallery ).find( a ).each(function(i){
        $(this).append( <div class="number">  + (i+1) +  </div> )
    });
});

and this css

.gallery .number {
    background: #eee;
    color: #000;
    min-width: 20px;
    height: 20px;
    position: absolute;
    font-size: 20px;
    line-height: 15px;
    bottom: 15px;
    right: 3px;
    z-index: 1;
    text-align: center;
    padding-top: 2px;
}
.gallery a {
    position: relative;
}

Edit: Oops, you can just add the i+1 to the demo...

友情链接