web-dev-qa-db-fra.com

Afficher les images dans une rangée (HTML)

J'ai donc cette page HTML très simple. Tout ce que je veux, c'est afficher les images dans une longue rangée. Quel est le moyen le plus simple, qui fonctionnerait sur tous les navigateurs?

<html>
<head>
<title>My title</title>
</head> 
<body>
<div id="images">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</body>
</html>
htmlimagerow
6
user2757799

Si vous voulez que #images soit une seule ligne, vous pouvez désactiver Habillage de mots .

#images {
    white-space: nowrap;
}

JSFiddle

6
Austin Brunkhorst

Regarde ça jsbin

Je pense que c'est le moyen le plus simple:

HTML:

<ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    <li><img src="4.jpg"></li>
    <li><img src="5.jpg"></li>
    <li><img src="6.jpg"></li>
</ul>

CSS: 

ul {
  white-space: nowrap;
}

ul, li {
  list-style: none;
  display: inline;
}

Mise à jour: Pour ne pas envelopper!

3
Black Sheep

Avec bootstrap:

<div class="row">
   <div class="column">
      <img src="1.jpg">
   </div>
   <div class="column">
      <img src="2.jpg">
   </div>
   ...
</div>

Voir Comment placer des images côte à côte

0
GKislin

Faites en sorte que votre conteneur div soit suffisamment large pour gérer toutes vos images.

Disons que toutes vos images sont 300px par 300px ;. si vous avez 6 images, votre div sera 1800px large

Assurez-vous que le conteneur est assez large pour contenir toutes vos images et elles ne seront pas emballées. Flotte ensuite chaque image à gauche.

<style>
    #images  {
        width: 1800px;
        height: 300px;
    }
    #images img {
        float: left;
    }
</style>

Je soupçonne que quelqu'un avec beaucoup plus de connaissances CSS aura un meilleur moyen? ...

0
timgavin