缩略图库 CSS 和 Jquery 问题

Question

我已经在网站上搜索了一下，想看看是否能找到答案，但不幸的是我找不到答案 - 我的问题非常具体，所以我希望有人能提供帮助。

我已经建立了一个带有缩略图的图库，您可以在下面的 link 中看到。我是根据我在网上找到的教程构建的，因为我对 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;
}

Answer 1

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

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

缩略图库 CSS 和 Jquery 问题

Thumbnail Gallery CSS and Jquery issue

jquery

html

css

gallery

image-gallery