縮略圖庫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;
}