Image côte à côte en CSS

Fermé

Html

Utilisateur anonyme - Modifié le 25 oct. 2018 à 10:46
Utilisateur anonyme - 26 oct. 2018 à 11:12

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

A voir également:

Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ?
Le fichier à télécharger est la nouvelle note de service de votre entreprise. importez ce fichier dans le bon dossier sur l'espace pix cloud. donnez à ce fichier les mêmes droits d'accès que les autres notes de service. ✓ - Forum Windows
Film d'action en français à télécharger - Télécharger - TV & Vidéo
Signer un document word - Guide
Supercopier 2 - Télécharger - Gestion de fichiers
Croix a cote du nom snap ✓ - Forum Snapchat

1 réponse

Réponse 1 / 1

overcool Messages postés 11 Date d'inscription mardi 11 septembre 2018 Statut Membre Dernière intervention 24 octobre 2018 1
24 oct. 2018 à 23:38

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
}

Utilisateur anonyme
25 oct. 2018 à 10:46

Super merci beaucoup vraiment ça marche super bien, et j'ai juste une question à quoi sert la balise <div> ?

hebus
26 oct. 2018 à 05:44

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

Utilisateur anonyme
26 oct. 2018 à 11:12

D'accord merci beaucoup

Discussions similaires

Ecrire du texte à coté de l 'image

mettre deux images cote a cote.

Aligner un texte avec son image

Comment mettre 3 image a coté avec leur lien?

HTML : mettre le texte à coté de l'image

2 boutons sur la même ligne