Gallerie de vignettes verticale

Comment aligner des vignettes verticalement avec un texte d'accompagnement?

Une méthode simple: utiliser une liste et une feuille de style appropriée...

Démonstration

Description

La vidéo sur le Web. Deux formats, deux codecs s'affrontent:
- H 264 supporté par Apple.
- WebM, lancé et supporté par Google, Mozilla.

Le premier est un format propriétaire et payant pour les vidéos commerciales.

Le second est un format libre et gratuit pour tous.
Description
Description

Code HTML

<ul class="vgallery">
  <li>
    <img src="" >
    <p>Description</p>
  </li>
  <li>
    <img src="" >
    ...etc...
</li>
</ul>

Code CSS

Feuille de style de la liste:

.vgallery
{
	padding:0;
	margin:0;
}

Supprimer les puces:

.vgallery li
{
  list-style:none;
}

Placer la vignette sur la gauche:

.vgallery img
{
  margin:4px;
  float:left;
}

Aligner l'élément suivant à gauche:

.vgallery li
{
  list-style:none;
  margin-left:0;
  clear:left;
}

L'attribut clear se rapporte à l'attribut float de l'image, qui peut provoquer un décalage du texte.

Aligner les textes verticalement se fait en appliquant un style aux paragraphes:

.vgallery p
{
  margin-left:132px;
}

La valeur de marge dépend de la largeur des images.

Le code CSS complet:

.vgallery
{
	padding:0;
	margin:0;
}
.vgallery img
{
  margin:4px;
  float:left;
}
.vgallery li
{
  list-style:none;
  margin-left:0;
  clear:left;
}
.vgallery p
{
  margin-left:132px;
}

Après le dernier élément de liste <li> et selon la hauteur de l'image, du fait que l'image est en float:left, vous pourrez avoir besoin d'un retour à la ligne. Ajoutez le avec une balise <br>:

<br style="clear:left" />

Dans la démo une balise <li> supplémentaire a le même effet.

Plus d'informations