Afficher deux images côte à côte sur un HTML Page

Question

J'essaie de placer deux images de la même taille côte à côte. Si j'utilise un table alors je peux afficher les deux images côte à côte. Mais dans ma feuille de style CSS, j'utilise un format personnalisé pour la table et cela apparaît également sur la page contenant les images.

Je veux juste afficher les deux images sans aucun arrière-plan personnalisé, frontière, etc.

J'ai essayé d'utiliser div, span, ul & li (etc.), mais a échoué dans tous les cas.

1. Comment puis-je placer deux images (de la même taille) dans une seule ligne, sans utiliser table?

2. Si je dois utiliser table pour le même, comment puis-je utiliser deux (ou plus) différents formats pour mes tableaux en utilisant CSS?

Answer 1

1. Avez-vous essayé float:left?
2. Joindre une classe différente à chaque table, puis dans votre css:

 
.table_one { 
    background-color: #CC0000; 
} 

.table_two { 
    background-color: #00CC00; 
} 

Answer 2

Vous pouvez faire comme:

<style type="text/css"> 
    .left{float:left;} 
</style> 

<img class="left" src="path here" /> 
<img class="left" src="path here" /> 

Answer 3

Utilisez float:left; vous dites que vous trouvez une petite marge de gauche afin vous pouvez essayer ceci

.left{ 
    float:left; 
    margin:0; 
    padding:0; 
} 

cela peut être la cause de marge ou paddin g. ou vous devez utiliser la balise body comme

body{margin:0; 
padding:0; 
} 

alors vous avez pas besoin d'écrire margin:0; padding:0;.

Answer 4

Généralement, la table est la seule façon de fonctionner dans toutes les situations. Selon où les deux images sont dans votre HTML, il peut y avoir un meilleur moyen, mais cela dépend. Y a-t-il un élément qui contient déjà les deux images? Quelles sont les propriétés de disposition de cet élément.

La feuille de style CSS qui modifie les propriétés d'une table est une mauvaise chose. On ne devrait définir les propriétés d'une classe de tables (en utilisant table.className) ou une table particulière (en utilisant table # id). Si vous ne pouvez pas changer la feuille de style, vous devez annuler les dégâts qu'elle provoque sur votre table. Pour ce faire, découvrez quelles propriétés la feuille de style a changé sur vous, et modifiez-les en émettant une règle CSS pour votre table (règle avec table.className ou table # id remplacera une règle plus générale) (préférable) ou en codant en dur la propriété en HTML en utilisant des styles en ligne (bien pour une solution rapide si vous n'en avez qu'une seule).

Answer 5

Ce que vous faites essentiellement, c'est de placer les deux étiquettes de source d'image l'une à côté de l'autre dans une ligne de code. Comme ça.

<img src="hi"><img src="hey"> 

Answer 6

Vous pouvez utiliser float:left.

html:

<div id="row"> 
    <img class="left" src="" /> 
    <img class="left" src="" /> 
</div> 

css:

.left{ 
    width: 250px; 
    height: 250px; 
    float: left; 
} 

//If you don't want margins 
body{ 
    margin:0; 
    padding:0; 
} 

Fiddle

Answer 7

Il suffit de faire ceci:

<img src="path/image.ext" /><img src="path/image.ext" /> 

Il affiche les images inline par défaut. Si non, ajouter:

<style>img {display: inline;}</style>