Mettre 2 imags côte à côte

Fermé

Ska - Modifié par Ska le 17/01/2012 à 18:39
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 17 janv. 2012 à 20:12

Bonjour, j'aimerais savoir ce qui ne vas pas dans mon code sachant que je veut mettre 4 images côte à côte avec un margin entre chaque. Voici mon code html et le css associé:

HTML:

<img src="E.jpg" alt="E" title="E" class="nate_para" />
<img src="d.jpg" alt="D" title="D" class="nate_para" />
<img src="g.jpg" alt="G" title="G" class="nate_para" />
<img src="m.jpg" alt="M" title="" class="nate_para" />

CSS:

.nate_para
{
display: block;
margin-left: auto;
margin-right: auto;
}

Merci d'avance pour les réponses! :)

A voir également:

Mettre 2 imags côte à côte
2 comptes whatsapp - Guide
Croix à côté du nom snap - Forum Snapchat
Snap - croix grise - Forum Snapchat
Casque jbl un seul cote fonctionne - Forum Casque et écouteurs
Ecouteur marche que d'un coté ✓ - Forum Audio

1 réponse

Réponse 1 / 1

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
17 janv. 2012 à 20:03

Hello,

Voici un exemple:

<html>
<head>
  <title></title>
  <style type="text/css" media="screen">
    body{
      text-align:center;
    }
    #gallery{
      width:960px;
      margin:0 auto;
    }
    img{
      float:left;
      margin:10px;
    }
  </style>
</head>
<body>
  <div id="gallery">
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
    <img src="http://lorempixel.com/220/220"/>
  </div>
</body>
</html>

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
17 janv. 2012 à 20:12

tu peux aussi utiliser:

img{
   display:inline-block;
   margin:5px;
 }

Cette solution est presque meilleure car elle permet à l'élément parent d'adapter en hauteur. Sans cela, il faut que tu place un élément en clear:both (par exemple <br style="clear:both"/>) juste avant la fermeture du div #gallery

Discussions similaires

A quoi correspond cette croix sur snapchat

Retrouver l'image originale après avoir fait des modifications ?

Aligner 2 photos côte à côte...

Savoir si je suis bloqué par une personne sur snap chat

Le son ne sort que d'un côté de mon casque, pourquoi ?

Discussions similaires

Newsletters