Thumbnail problema galeria altura

Question

Eu tenho esta galeria de miniaturas de vídeos do YouTube com o título abaixo. http://skitch.com/subzane/bqgqw/demo

O problema que tenho é que, quando flutuando eles não aparecem como eu gosto, isso porque a altura é variável. Eu li um post no blog há algumas semanas resolver apenas o problema, mas não posso encontrá-lo em qualquer lugar.

Então, eu estou pedindo o link para esse post ou o conteúdo do que realmente:)

• A altura miniaturas variam, não posso definir isso para uma altura fixa.
• O número de polegares por linha variar. Não consigo definir um número fixo.
• nenhum correções JavasScript. única css.

Obrigado

Answer 1

OK. Depois de mais horas de googling eu encontrei o que eu estava procurando.

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

É um uso de display:. Inline-block que resolve meu problema

Answer 2

em vez de divs flutuante, você pode alternar suas miniaturas para listas (que na verdade é mais semanticamente qualquer maneira correta ..)

Por exemplo:

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

para referência futura, visita http://www.alistapart.com/articles/practicalcss/

Answer 3

Quanto é a altura realmente vai variar? Se ele não vai variar muito em seguida, basta definir a altura ao do máximo?

Para navegadores que suportam inline-block:

Embora aqui está um inline-block cross browser artigo

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