代码之家  ›  专栏  ›  技术社区  ›  user3714234

缩略图库CSS和Jquery问题

  •  0
  • user3714234  · 技术社区  · 10 年前

    我已经在网站上进行了搜索,看看是否能找到答案,但遗憾的是,我找不到答案-我的问题很具体,所以我希望有人能帮助我。

    我已经建立了一个缩略图库,你可以在下面的链接中看到。我是根据我在网上找到的一个教程构建的,因为我对Jquery还不太熟悉。我不得不从教程代码中修改大图像和缩略图的大小,因为这样做并没有完全符合我的意愿。我只按照教程中的指示修改了CSS中的大小。

    我的问题是:图像上的缩略图块与大图像的底部没有很好地对齐。我已经检查了CSS的各个方面,并将其粘贴在下面。

    非常感谢您的光临。

    http://www.emmasteed.co.uk/robsteed/gallery.html

    #slideshow-main {
        width:714px; 
        float:left; 
        margin-right:3px;
    }
    
    #slideshow-main ul {
        margin:0; 
        padding:0; 
        width:714px;
    }
    
    #slideshow-main li {
        width:714px; 
        height:351px; 
        display:none;
        position:relative;
    }
    
    #slideshow-main li.active {
        display:block !important;
    }
    
    #slideshow-main li span.opacity {
        position:absolute;
        bottom:0; left:0;
        display:block; 
        width:100%;
        height:60px;
        background:#000;
        filter:alpha(opacity=50); 
        -moz-opacity:0.5; 
        -khtml-opacity: 0.5; 
        opacity: 0.5;
        z-index:500;
    }
    
    #slideshow-main li span.content {
        position:absolute;
        bottom:0; left:0;
        display:block; 
        width:100%;
        height:60px;
        z-index:1000;
    }
    
    #slideshow-main li span.content h1 {
        font-size:14px;
        margin:5px 0;
        padding:0 10px;;
        color:#42e2e8;
    }
    
    #slideshow-main li span.content p {
        font-size:11px;
        margin:5px 0;
        padding:0 10px;;
        color:#42e2e8;
    }
    
    #slideshow-carousel {
        float:left;
        width:206px;
        height:400px;
        position:relative;
    }
    
    #slideshow-carousel ul {
        margin:0; 
        padding:0;
        list-style:none;
    }
    
    #slideshow-carousel li {
        background:#fff; 
        height:117px; 
        position:relative
    }
    
    #slideshow-carousel li .arrow {
        left:3px; 
        top:38px; 
        position:absolute; 
        width:20px; 
        height:40px; 
        background:url(images/arrow_white.png) no-repeat 0 0; 
        display:block;
    }
    
    #slideshow-carousel li a {
        background:#000; 
        display:block; 
        width:206px; 
        height:117px;
    }
    
    
    #slideshow-carousel .active {
        filter:alpha(opacity=100); 
        -moz-opacity:1.0; 
        -khtml-opacity: 1.0; 
        opacity: 1.0;
    }
    
    #slideshow-carousel .faded {
        filter:alpha(opacity=50); 
        -moz-opacity:0.5; 
        -khtml-opacity: 0.5; 
        opacity: 0.5;
    }
    
    1 回复  |  直到 10 年前
        1
  •  1
  •   chrisbedoya    10 年前

    更改的高度 .jcarousel-skin-tango .jcarousel-container-vertical 以匹配滑块的高度。

    .jcarousel-skin-tango .jcarousel-container-vertical {
        height: 351px;
    }