Центрирование галереи миниатюр с подписями без фиксированного размера изображения - PullRequest
Новая
       35

Центрирование галереи миниатюр с подписями без фиксированного размера изображения

0 голосов
/ 29 сентября 2011

Я безуспешно пытался реализовать макет в прикрепленном изображении. Когда применяется div с настройкой таблицы, IE ломается, если элементы плавают, когда заголовки занимают более одной строки, макет снова нарушается. Любое предложение будет с благодарностью.!

Макет изображения: http://i53.tinypic.com/1zqcwf7.png

Вот CSS 

.thumbsHolder {clear:both;float:left;width:100%;overflow:hidden;}
.thumbsHolder ul#prodThumbs {padding-top:20px;margin:0 auto;list-style-type:none;text-align:center;}
.thumbsHolder ul#prodThumbs li {float:left;padding:0 7px;min-height:150px;}
.thumbsHolder ul#prodThumbs li a {font-family:Arial, Helvetica, sans-serif;font-weight:normal;text-decoration:none;font-size:70%;}

HTML 

<div class="thumbsHolder">
<ul id="prodThumbs">
<li><a href="link1.htm"><img src="thumb1.jpg" /></a> <!-- image width and height may differ -->
<p><a href="link1.htm">Caption</a></p></li>
<li><a href="link2.htm"><img src="thumb2.jpg" /></a>
  <p><a href="link2.htm">Longer caption</a></p>
</li>
<li><a href="link3.htm"><img src="thumb3.jpg" /></a>
  <p><a href="link3.htm">Even longer caption</a></p>
</li>
<li><a href="link4.htm"><img src="thumb4.jpg" /></a>
  <p><a href="link4.htm">Longer caption</a></p>
</li>
<li><a href="link5.htm"><img src="thumb5.jpg" /></a>
  <p><a href="link5.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link6.htm"><img src="thumb6.jpg" /></a>
  <p><a href="link6.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link7.htm"><img src="thumb7.jpg" /></a>
  <p><a href="link7.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link8.htm"><img src="thumb8.jpg" /></a>
  <p><a href="link8.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link9.htm"><img src="thumb9.jpg" /></a>
  <p><a href="link9.htm">Since we have a wider image at first row, this row must be centered</a></p>
</li>
<li><a href="link10.htm"><img src="thumb10.jpg" /></a>
  <p><a href="link10.htm">Longer caption</a></p>
</li>
<li><a href="link11.htm"><img src="thumb11.jpg" /></a>
  <p><a href="link11.htm">Here text also goes down, so if we float layout breaks</a></p>
</li>
<li><a href="link12.htm"><img src="thumb12.jpg" /></a>
  <p><a href="link12.htm">Caption</a></p>
</li>
<li><a href="link13.htm"><img src="thumb13.jpg" /></a>
  <p><a href="link13.htm">Longer caption</a></p>
</li>
<li><a href="link14.htm"><img src="thumb14.jpg" /></a>
  <p><a href="link14.htm">This is a centered image</a></p>
</li>
<li><a href="link15.htm"><img src="thumb15.jpg" /></a>
  <p><a href="link15.htm">This is out last image</a></p>
</li>
</ul>
</div>

1 Ответ

0 голосов
/ 05 октября 2011

Вы должны знать, каким будет максимальный размер миниатюры при создании на вашем сайте, должно быть некоторое ограничение.Почему бы не обернуть ваш тег в набор div, который делит высоту на максимум миниатюры.Затем выровняйте img в div.Тогда у вас есть ваш p-тег ниже для подписей

...