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