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;
}

缩略图库CSS和Jquery问题

1 个答案: