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

Question

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

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

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

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

Спасибо

Answer 1

OK. После нескольких часов работы в Интернете я нашел то, что искал.

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

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

Answer 2

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

Например:

<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 3

Какова высота на самом деле? Если это не изменится, то просто установите высоту как высоту макс?

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

Хотя вот inline-block cross browser статья

#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>