缩略图库 CSS 和 Jquery 问题

Question

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

我已经建立了一个带有缩略图的画廊，您可以在下面的链接中看到它。我从网上找到的教程构建了这个，因为我对 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;
}