Alignement images avec float: left

Version imprimable

Bonjour,

je ne vaux pas une bille en CSS...

J'aimerais avoir une dizaine de petites vignettes les unes à côté des autres. L'ensemble étant aligné à gauche. Et que suivant la taille de la fenêtre il y a éventuellement un saut de ligne et les vignettes suivantes accolées toujours alignées à gauche.

J'ai un code suivant :
Code:

1 2 3 <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="images/xxx.jpg" alt="xxx" width="91" height="129" /><img style="margin-right: 9px; float: left;" title="yyy" src="images/yyy.jpg" alt="yyy" width="91" height="129" /> (...) <img style="margin-right: 9px; float: left;" title="zzz" src="images/zzz.jpg" alt="zzz" width="91" height="129" /><span class="clearfix"></span></p>
Ce code fonctionne bien tant que la fenêtre n'est pas plus petite que la largeur de toutes les vignettes accolées sur une même ligne.
Dès que c'est plus petit, et qu'il y a un saut de ligne, la vignette qui passe à la ligne est alignée un peu n'importe comment, etc.

Comment s'en sortir ?

Merci pour l'aide
PAul

Bonsoir,

avec bootstrap, on s'en sort (et chu une bille aussi) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
 
    <title></title>
 
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
     </head>
 
  <body>
 
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=1" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=2" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=3" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=4" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=5" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=6" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=7" alt="xxx" width="91px"/></p>
      <p style="text-align: left;"><img style="margin-right: 9px; float: left;" title="xxx" src="http://via.placeholder.com/640x360?text=8" alt="xxx" width="91px"/></p>
 
 
 
 
     <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
  </body>
</html>

22/01/2019, 21h39
Mister Paul

Merci Laurent,

Je suis avec un CMS alors ça n'est pas facile de gérer le chargement du Heading. Mais par chance le template utilise Bootstrap

Code:

<link href="/templates/flex/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

J'ai mis ton code avec pour chaque image

Code:

<p style="text-align: left;"><img style="margin-right: 9px; float: left;" etc.></p>

Malheureusement (sauf erreur) ça ne fonctionne pas. J'obtiens quelque chose comme ça : https://www.cjoint.com/doc/19_01/IAwuMBkdQWU_test.jpg
22/01/2019, 22h31
laurentSc

Peux-tu donner l'URL de la page qui pose problème ?
23/01/2019, 12h42
laurentSc

Bonjour,
ce matin, j 'ai fait 2 essais : un avec display:table et un avec les flexbox. Le premier fonctionne bien en local, mais si je le mets dans un CMS (j'ai sous la main un site fait avec Wordpress) toutes les images sont mises en colonne, et avec les flexbox, si on réduit la page, au lieu que les images aillent à la ligne, elles restent sur une seule ligne mais leur taille est réduite, donc langue au chat...:(
23/01/2019, 13h55
Eregiskhal
Tu as essayé de mettre un flex-wrap à la flexbox ?
Code:

1 2 3 4 5 6 #conteneur { display: flex; flex-wrap: wrap; }

excellent, je connaissais pas.

Paul, essaie ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div style="display:flex;flex-wrap: wrap;
    flex-direction:row;">
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=1" alt="xxx" width="91px"/>
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=2" alt="xxx" width="91px"/>
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=3" alt="xxx" width="91px"/>
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=4" alt="xxx" width="91px" />
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=5" alt="xxx" width="91px"/>
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=6" alt="xxx" width="91px"/>     
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=7" alt="xxx" width="91px"/>
      <img   title="xxx" src="http://via.placeholder.com/640x360?text=8" alt="xxx" width="91px"/>
    </div>

J'ai viré tes float:left...

23/01/2019, 18h00
Mister Paul

Merci ! J'essaie ça tard ce soir ou demain matin tôt.

Juste un truc : je n'ai pas de DIV dans cette page... Il faut que je la restructure totalement avec des DIV ? ou je peux insérer à l'intérieur des paragraphes, comme ça :
<p></p><div></div><p></p>
23/01/2019, 19h16
laurentSc

Le minimum syndical suffit et d'ailleurs, ça marche aussi si tu remplaces la balise <DIV> par une balise <P>
24/01/2019, 10h50
Mister Paul

Merci !

Votre code fonctionnait très bien seul.
Sauf que j’ai besoin que chaque image ait la class « thumbnail » de Bootstrap. Et ça fichait le bazar : le border de chaque image prenait la pleine largeur de la fenêtre. Et on avait toutes les vignettes les unes au-dessus des autres et non accolées comme souhaité…
:-(

Mais en mettant votre code dans un <div> plutôt que dans un <p> cela a tout rétabli.
Ouf

Merci
:-)