jquery - 缩略图库CSS和Jquery问题

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

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

最佳答案

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

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

关于jquery - 缩略图库CSS和Jquery问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28461613/