Thumbnail galerie hauteur problème

Question

J'ai cette galerie de miniatures de vidéos youtube avec leur titre sous. Le problème que j'ai est qu'en les flottant ils n'apparaissent pas comme j'aime, ceci parce que la taille est variable. J'ai lu un billet il y a quelques semaines pour résoudre ce problème mais je ne le trouve nulle part.

Je demande donc le lien vers ce blog ou le contenu de celui-ci vraiment :)

• La hauteur des miniatures varient, je ne peux pas définir ce à une hauteur fixe.
• Le nombre de pouces par ligne varie. Je ne peux pas définir un nombre fixe.
• aucun correctif javasscript. seulement css.

Merci

Answer 1

OK. Après plus d'heures de google, j'ai trouvé ce que je cherchais.

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

Il y a une utilisation de l'affichage: inline-block qui résout mon problème.

Answer 2

au lieu de divs flottant, vous pouvez passer vos vignettes aux listes (qui est en fait plus sémantiquement correct quand même ..)

Par exemple:

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

pour référence supplémentaire, visitez http://www.alistapart.com/articles/practicalcss/

Answer 3

De combien la hauteur va-t-elle vraiment varier? Si cela ne va pas beaucoup varier, il suffit de régler la hauteur à celle du maximum?

Pour les navigateurs qui prennent en charge inline-block:

Bien que voici un inline-block cross browser article

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