Mettre 2 imags côte à côte

Ska -
prosthetiks Messages postés 1309 Statut Membre - 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! :)

Afficher la suite

1 réponse

prosthetiks Messages postés 1309 Statut Membre 431

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 1309 Statut Membre 431
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
0

Mettre 2 imags côte à côte

1 réponse

Discussions similaires

Newsletters