Galería de miniaturas problema de altura

Question

Tengo esta galería de miniaturas de videos de youtube con su título debajo. http://skitch.com/subzane/bqgqw/demo

El problema que tengo es que cuando los floto no aparecen como me gusta, esto porque la altura es variable. Leí una publicación de blog hace unas semanas resolviendo solo ese problema, pero no puedo encontrarlo en ningún lado.

Así que les pido el enlace a esa publicación de blog o el contenido de la misma :)

• La altura de las miniaturas varía, no puedo establecer esto en una altura fija.
• El número de pulgares por fila varía. No puedo establecer un número fijo.
• no hay correcciones de javasscript. solo css.

Gracias

Answer 1

OK. Después de más horas de buscar en Google, encontré lo que estaba buscando.

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

Es un uso de display: bloque en línea que resuelve mi problema.

Answer 2

en lugar de divs flotantes, puedes cambiar tus miniaturas a listas (lo que en realidad es más correcto semánticamente de todos modos)

Por ejemplo:

<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 mayor referencia, visite http://www.alistapart.com/articles/practicalcss/

Answer 3

¿Cuánto va a variar realmente la altura? Si no va a variar mucho, simplemente ajuste la altura a la máxima?

Para navegadores que admiten bloqueo en línea:

Aunque aquí hay un navegador cruzado de bloque en línea artículo

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