Image côte à côte en CSS [Fermé]

Signaler
-
 Utilisateur anonyme -
Bonjour, j'aimerais pouvoir mettre ces trois images côte à côte avec le même espace

Voici mon code: 
        <img class="fd1" src="img/73825_.jpg" width="500" height="300" alt="img/73825_.jpg" title="" style="float: left;margin:0 10px 0 20px"; />
        <img class="fd2" src="img/73826.jpg" width="500" height="300" alt="img/73826.jpg" title="" style="float: unset; margin:0 10px 0 20px";/>
        <img class="fd3" src="img/aaa.jpg" width="500" height="300" alt="img/aaa.jpg" title="" style="float: right; margin: 0 10px 0 20px";/>

Et le css: 
img.fd1{
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin: 0px;
    background-repeat: no-repeat;
}

img.fd2{
    padding: 0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
}

img.fd3{
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin: 0px;
    background-repeat: no-repeat;
}

Et j'aimerais aussi qu'elles s'adaptent à toutes les tailles d'écrans
Merci beaucoup de votre aide ;)

1 réponse

Réponse 1 / 1
Messages postés
11
Date d'inscription
mardi 11 septembre 2018
Statut
Membre
Dernière intervention
24 octobre 2018
 1
Tu peux définir tes 3 images en pourcentage et utiliser Box Sizing afin d'éviter que les marges ne casse les colonnes et qu'une image se retrouve en dessous en fonction de la taille d'écran.

https://jsfiddle.net/ukdrwmo8/1/ 

img.fd1,
img.fd2,
img.fd3 {
  width: 33%;
  height: auto;
  padding: 10px;
  float: left;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
Signaler
Utilisateur anonyme
Super merci beaucoup vraiment ça marche super bien, et j'ai juste une question à quoi sert la balise <div> ?
Signaler

Salut, HTML est un langage descriptif. Il permet d'indiquer la délimitation d'un contenu et la sémantique.
C'est pour cela que dans sa dernière version(HTML5) il est FORTEMENT recommandé d'éviter d'utiliser la balise div(ide) qui indique une division de la page sans un but précis. Il est préférable d'utiliser des balises/containers indiquant mieux le contenu comme section et article(sans oublier la table des matières-table of content faite à l'aide d'une balise de titre) ou une autre balise décrivant son contenu (p, span, nav, header, footer...).
Signaler
Utilisateur anonyme
D'accord merci beaucoup
Posez votre question