web-dev-qa-db-fra.com

Comment puis-je mettre des images dans un format semblable à une grille?

J'ai environ 12-15 images que je veux aligner ensemble dans une grille, avec du texte sous chaque image. Je pensais utiliser une table, mais j’entends dire que les tables ne sont pas la meilleure voie à suivre ces jours-ci. J'ai essayé quelques autres choses, mais rien ne semblait fonctionner comme je le voulais.

Voici un exemple de ce à quoi je veux ressembler:

[----- Image -----] [----- Image -----] [----- Image -----] [----- Image ---- -] --- Ligne 1(--Description-) (-Description-) (-Description-) (-Description-)

[----- Image -----] [----- Image -----] [----- Image -----] [----- Image ---- -] --- Ligne 2(--Description-) (-Description-) (-Description-) (-Description-)

etc...

Quelles sont les autres méthodes, à part les tableaux, que je devrais envisager d'utiliser? Toute suggestion ou référence serait utile.

htmlcssimagegrid
11
Peter

HTML:

 <div class = "floated_img"> 
 <img src = "img.jpg" alt = "Une image"> 
 <p> Description de l'image ci-dessus </ p> 
 </ div> 
 <div class = "floated_img"> 
 <img src = "img2.jpg" alt = "Une autre image"> 
 <p > Description de l'image ci-dessus </ p> 
 </ Div>

CSS:

. floated_img 
 {
 float: gauche; 
}

Vous voudrez probablement plus de styles, mais cela devrait faire ce que vous voulez.

9
crimson_penguin

Une grille comme format? sonne comme une table pour moi. Il n'y a rien de mal avec les tables si vous les utilisez pour quelque chose qui est en fait une table.

1
Eric Petroelje

Puisque vous avez dit grille, cela signifie que la hauteur et la largeur seront fixes.

Un bloc en ligne peut très bien fonctionner pour vous. Je trouve qu'ils sont un peu plus faciles à travailler que les flotteurs. Et, inline-blocks respecte la propriété align héritée (vous pouvez donc les centrer)

CSS

.grid_element {
  display: inline-block;
  width: 200px;
  height:200px;
  zoom: 1;         /* for IE */
  display*:inline; /* for IE */
}

Toutefois, les éléments de bloc en ligne risquent de ne pas fonctionner correctement sur les anciens navigateurs.

Quelques lectures:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html

0
The Who