Проблема с высотой галереи миниатюр

Question

У меня есть галерея миниатюр видео на YouTube с заголовком. http://skitch.com/subzane/bqgqw/demo

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

Поэтому я прошу ссылку на этот пост в блоге или его содержание:)

• Высота миниатюр варьируется, я не могу установить фиксированную высоту.
• Количество пальцев в ряду варьируется. Я не могу установить фиксированный номер.
• без исправлений в JavaScript. только css.

Спасибо

Answer 1

вместо плавающих div, вы можете переключать свои миниатюры в списки (что на самом деле более семантически правильно в любом случае ..)

Например:

<style type="text/css">

ul {
    list-type: none;
}

li {
    display: inline;
}
li img {
    vertical-align: top;
    margin-left: 5px;
    padding-bottom: 5px;
}

</style>

<div style="width: 280">
    <ul>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    </ul>
</div>

для дальнейшего ознакомления, посетите http://www.alistapart.com/articles/practicalcss/

Answer 2

OK. После нескольких часов поисков я нашел то, что искал.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Это использование отображения: встроенный блок, который решает мою проблему.

Answer 3

Насколько реально будет меняться высота? Если он не будет сильно меняться, просто установите высоту на максимум?

Для браузеров, которые поддерживают встроенный блок:

Хотя это кросс-браузер со встроенным блоком статья

#thumbsWrapper div{display:inline-block;vertical-align:top;margin:20px;border:solid 1px #f00;width:180px;}

<div id="thumbsWrapper">
  <div style="height:180px;">
    <img src="thumbnail1.gif" />
  </div>
  <div style="height:240px;">
    <img src="thumbnail2.gif" />
  </div>
  <div style="height:210px;">
    <img src="thumbnail3.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail4.gif" />
  </div>
  <div style="height:300px;">
    <img src="thumbnail5.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail6.gif" />
  </div>
</div>