1
嗨我已經設置了一個畫廊,其中的圖像列在縮略圖旁邊的主圖像,可以由用戶縮放。CSS jqzoom對齊問題
:然而,由於某些原因,當我使用3個縮略圖(4與主圖像對齊完美),而不是從div的頂部上市,它們將被從底部這樣的網頁看起來像對齊
________
| |
_ | |
|_|| |
_ | |
|_|| |
_ | |
|_||_______|
,而不是
_ ________
|_|| |
_ | |
|_|| |
_ | |
|_|| |
| |
|_______|
我的CSS是:
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}
ul#thumblist{display:block; margin-left:-40px;}
ul#thumblist li{float:left;margin-right:6px; margin-bottom:4px; margin-top:-2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #666}
ul#thumblist li a.zoomThumbActive{
border:1px solid #F7941E;
}
和我的HTML是:
<table border>
<tr>
<td width="101" rowspan="4"><div class="clearfix" >
<ul id="thumblist" class="clearfix" >
<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/1.jpg',largeimage: './imgProd/1.jpg'}"><img src='imgProd/1.jpg' style="width:110px; height:110px;"></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/2.jpg',largeimage: './imgProd/2.jpg'}"><img src='imgProd/2.jpg' style="width:110px; height:110px;"></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/3.jpg',largeimage: './imgProd/3.jpg'}"><img src='imgProd/3.jpg' style="width:110px; height:110px;"></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/4.jpg',largeimage: './imgProd/4.jpg'}"><img src='imgProd/4.jpg' style="width:110px; height:110px;"></a></li>
</ul>
</div></td>
<td width="450" rowspan="4"><div class="clearfix">
<a href="imgProd/1.jpg" class="jqzoom" rel='gal1' title="" >
<img src="imgProd/1.jpg" title="" style="border:2px solid #F7941E;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); width:450px; height:450px;">
</a>
</div></td>
<td></td>
</tr>
</table>
爲什麼不會將圖像從DIV /表頂部垂直對齊,而不是從底部對齊?任何幫助非常感謝!
感謝 JD