我已经在网站上进行了搜索,看看是否能找到答案,但遗憾的是,我找不到答案-我的问题很具体,所以我希望有人能帮助我。
我已经建立了一个缩略图库,你可以在下面的链接中看到。我是根据我在网上找到的一个教程构建的,因为我对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;
}