Image côte à côte en CSS
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour, j'aimerais pouvoir mettre ces trois images côte à côte avec le même espace 
Voici mon code:
Et le css:
Et j'aimerais aussi qu'elles s'adaptent à toutes les tailles d'écrans
Merci beaucoup de votre aide ;)
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é ? pix
- Dans la table des matières du document à télécharger, le chapitre 6 et ses 2 sections n'apparaissent pas. trouvez l'erreur dans la structure du document et corrigez-la. mettez à jour la table des matières. quel est le mot formé par les lettres en majuscules de la table des matières après sa mise à jour ? - Forum Word
- Dans le diaporama à télécharger, les diapositives s’enchaînent automatiquement. combien de temps la diapositive crayon met-elle à s’afficher ? combien de temps reste-t-elle affichée à l’écran ? ✓ - Forum Powerpoint
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : - Guide
- Comment reduire la taille d'un document - Guide
- Croix a cote contact snap - Forum Snapchat
1 réponse
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/
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
}
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...).