Problème d'une suite d'images responsives

Coloniseur
Les bases HTML/CSS

Salut tous le monde! Bon alors je sais, y a plein de sujets similaires mais le miens diffère un peu de la norme je pense :)

Voilà, je suis en train de faire un Prestashop pour un client et j'ai un petit soucis, dans le thème que j'utilise il y a une class:

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

Très pratique est fonctionnelle, cependant, j'ai un soucis, à un endroit je dois mettre un bloc de 4 images (alignées) en responsive
cependant, si j'applique cette class à chaqune des images, alors celles-ci s'affichent avec des sauts de lignes.

Image1
Image2
Image3
Image4

au lieu de Image1Image2Image3Image4

Ca va surrement parraitre con à une personne qui est bien callée en css mais perso je bloc :)
J'ai aussi testé d'attribuer la class .img-responsive à la balise <p> qui contiens les 4 images mais aucun effet.

Le problème c'est que si je change la valeur display de block &| flex, le bloc de 4 images n'est plus responsive et celles-ci vont à la ligne à mesure que l'écran rétrécit. :/

Merci d'avance et désolé pour les fautes ^^'

2 réponses

Coloniseur
Auteur

En faisant un test je me suis rendu compte de la connerie de mettre un display: block sur une suite d'image :)
Je m'aplaudis à 2 mains et je continu mes recherches!

Pierre Ftn

il suffit de t'inspirer des framework comme bootstrap ou fundation ,
tu crée une classe colonne comme ceci 

.col {
    display:inline-block;
    width:25%;
    height:auto;
    }

et ensuite en html 

    <div class="col"><img class="img-responsive" ... /></div>
    <div class="col"><img class="img-responsive" ... /></div>
      <div class="col"><img class="img-responsive" ... /></div>
      <div class="col"><img class="img-responsive" ... /></div>