Comment afficher les images côte à côte dans un README.md GitHub?

J'essaie de montrer une comparaison entre deux photos dans mon README.md, c'est pourquoi je veux les afficher côte à côte. Voici comment les deux images sont placées actuellement. Je veux montrer les deux schémas de couleurs Solarized côte à côte au lieu du haut et du bas. L'aide serait très appréciée, merci!

Le moyen le plus simple de résoudre ce problème consiste à utiliser les tables incluses dans le démarquage aromatisé de GitHub.

Pour votre exemple spécifique, cela ressemblerait à ceci:

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

Cela crée un tableau avec Solarized Dark et Ocean comme en-têtes, puis contient les images de la première ligne. Évidemment, vous remplaceriez le ...par le lien réel. Les :s sont facultatifs (ils centrent simplement le contenu dans les cellules, ce qui est un peu inutile dans ce cas). Vous pouvez également réduire la taille des images pour qu'elles s'affichent mieux côte à côte.

Vous pouvez placer chaque image côte à côte en écrivant la démarque de chaque image sur la même ligne.

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

Tant que les images ne sont pas trop grandes, elles s'afficheront en ligne comme le montre cette capture d'écran d'un fichier README de GitHub:

Cela affichera les trois images côte à côte si les images ne sont pas trop larges.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

Similaire aux autres exemples, mais en utilisant le dimensionnement html, j'utilise:

<img src="image1.png" width="425"/> <img src="image2.png" width="425"/> 

Voici un exemple

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" width="200"/> <img src="https://openclipart.org/download/71101/two.svg" width="300"/>

J'ai testé cela en utilisant Remarkable .

Si, comme moi, vous constatez que la réponse @wiggin ne fonctionnait pas et que les images n'apparaissaient toujours pas en ligne, vous pouvez utiliser la propriété 'align' de la balise d'image html et quelques pauses pour obtenir l'effet souhaité, par exemple:

# Title

<img align="left" src="./documentation/images/A.jpg" alt="Made with Angular" title="Angular" hspace="20"/>
<img align="left" src="./documentation/images/B.png" alt="Made with Bootstrap" title="Bootstrap" hspace="20"/>
<img align="left" src="./documentation/images/C.png" alt="Developed using Browsersync" title="Browsersync" hspace="20"/>
<br/><br/><br/><br/><br/>

## Table of Contents...

Évidemment, vous devez utiliser plus de pauses en fonction de la taille des images: horrible oui, mais cela a fonctionné pour moi alors j'ai pensé partager.

C'est le meilleur moyen d'ajouter des images / captures d'écran de votre application et de garder votre référentiel propre.

Créez un screenshotdossier dans votre référentiel et ajoutez les images que vous souhaitez afficher.

Maintenant, allez README.mdet ajoutez ce code HTML pour former un tableau.

#### Flutter App Screenshots

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td><img src="screenshots/Screenshot_1582745092.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745125.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745139.png" width=270 height=480></td>
  </tr>
 </table>

dans le <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** Pour obtenir le chemin de l'image -> Allez dans le screenshotdossier et ouvrez le bouton imageet sur le côté le plus à droite, vous trouverez le Copy pathbouton.

Vous obtiendrez une table comme celle-ci dans votre référentiel --->

Pour se greffer sur @Maruf Hassan

# Title

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td valign="top"><img src="screenshots/Screenshot_1582745092.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745125.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745139.png"></td>
  </tr>
 </table>

<td valign="top">...</td>est pris en charge par GitHub Markdown. Les images de différentes hauteurs peuvent ne pas s'aligner verticalement près du haut de la cellule. Cette propriété le gère pour vous.