0
我已经通过该网站进行了一次搜索,以查看我是否可以找到答案,但不幸的是我无法找到答案 - 我的问题非常具体,所以我希望有人可以提供帮助。缩略图库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;
}
非常感谢!我没有意识到有一个单独的CSS,我需要修改。发现了 - 谢谢! – user3714234 2015-02-11 18:41:18