2011-10-15 101 views
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

回答