Problème de hauteur de la galerie de vignettes

Question

J'ai cette galerie de vignettes de vidéos youtube avec leur titre sous. http://skitch.com/subzane/bqgqw/demo

Le problème, c’est que lorsqu’ils sont flottants, ils n’apparaissent pas comme je le veux, c’est parce que la hauteur est variable. J'ai lu un article de blog il y a quelques semaines qui résoudrait ce problème, mais je ne le trouve nulle part.

Je demande donc le lien vers ce blog ou son contenu réellement:)

• La hauteur des vignettes varie, je ne peux pas définir une hauteur fixe.
• Le nombre de pouces par ligne varie. Je ne peux pas définir de numéro fixe.
• aucun correctif javasscript. seulement css.

Merci

Answer 1

OK Après plus d’heures de recherches sur Google, j’ai trouvé ce que je cherchais.

http: //blog.mozilla. com / webdev / 2009/02/20 / bloc en ligne croisé /

C’est une utilisation de display: inline-block qui résout mon problème.

Answer 2

au lieu de div flottant, vous pouvez basculer vos vignettes en listes (ce qui est en fait plus correct sémantiquement de toute façon ..)

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 plus de références, visitez le site http://www.alistapart.com/articles/practicalcss/ <

Answer 3

Combien la hauteur va-t-elle réellement varier? Si cela ne varie pas beaucoup, il suffit de régler la hauteur sur celle du maximum?

Pour les navigateurs prenant en charge Inline-Block:

Bien qu'il s'agisse d'un navigateur croisé inline-block 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>