CSS jqzoom выровнять проблемы - PullRequest
Новая
       6

CSS jqzoom выровнять проблемы

1 голос
/ 16 октября 2011

Привет! Я установил галерею, в которой изображения перечислены в виде миниатюр вместе с основным изображением, которое, в свою очередь, может быть увеличено пользователем.

Однако по какой-то причине, когда я использую 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

1 Ответ

1 голос
/ 16 октября 2011

Вы должны просто иметь возможность использовать 

tr{
    vertical-align:top;
}

Пример: http://jsfiddle.net/7fp8s/

...