Alignement images avec float: left

**Mister Paul** · 22/01/2019, 19h01

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**laurentSc** · 22/01/2019, 20h01

Bonsoir,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Mister Paul** · 22/01/2019, 21h39

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'ai mis ton code avec pour chaque image

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**laurentSc** · 22/01/2019, 22h31

Peux-tu donner l'URL de la page qui pose problème ?

**laurentSc** · 23/01/2019, 12h42

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

**Eregiskhal** · 23/01/2019, 13h55

Tu as essayé de mettre un flex-wrap à la flexbox ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**laurentSc** · 23/01/2019, 14h45

excellent, je connaissais pas.

Paul, essaie ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Mister Paul** · 23/01/2019, 18h00

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>

**laurentSc** · 23/01/2019, 19h16

Le minimum syndical suffit et d'ailleurs, ça marche aussi si tu remplaces la balise <DIV> par une balise <P>

**Mister Paul** · 24/01/2019, 10h50

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

Alignement images avec float: left

Positionnement en CSS

Discussions similaires

Partager

Partager