Wie kann man Bilder in einem GitHub README.md nebeneinander anzeigen?

Ich versuche, einen Vergleich zwischen zwei Fotos in meiner README.md anzuzeigen, weshalb ich sie nebeneinander anzeigen möchte. Hier ist , wie die beiden Bilder angeordnet sind zur Zeit. Ich möchte die beiden solarisierten Farbschemata nebeneinander anstatt oben und unten anzeigen. Hilfe wäre sehr dankbar, danke!

Der einfachste Weg, dies zu lösen, ist die Verwendung der Tabellen in GitHubs aromatisiertem Markdown.

Für Ihr spezielles Beispiel würde es ungefähr so ​​aussehen:

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

Dadurch wird eine Tabelle mit Solarized Dark und Ocean als Überschriften erstellt, die dann die Bilder in der ersten Zeile enthält. Offensichtlich würden Sie das durch ...den echten Link ersetzen . Die :s sind optional (sie zentrieren nur den Inhalt in den Zellen, was in diesem Fall irgendwie unnötig ist). Möglicherweise möchten Sie auch die Bilder verkleinern, damit sie nebeneinander besser angezeigt werden.

Sie können jedes Bild nebeneinander platzieren, indem Sie den Markdown für jedes Bild in dieselbe Zeile schreiben.

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

Solange die Bilder nicht zu groß sind, werden sie inline angezeigt, wie dieser Screenshot einer README-Datei von GitHub zeigt:

Dadurch werden die drei Bilder nebeneinander angezeigt, wenn die Bilder nicht zu breit sind.

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

Ähnlich wie bei den anderen Beispielen, aber mit HTML-Größe, verwende ich:

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

Hier ist ein Beispiel

<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"/>

Ich habe dies mit Remarkable getestet .

Wenn Sie wie ich festgestellt haben, dass die Antwort von @wiggin nicht funktioniert hat und die Bilder immer noch nicht inline angezeigt werden, können Sie die Eigenschaft 'align' des HTML-Bild-Tags und einige Unterbrechungen verwenden, um den gewünschten Effekt zu erzielen. Beispiel:

# 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...

Natürlich muss man mehr Pausen einlegen, je nachdem wie groß die Bilder sind: schrecklich ja, aber es hat bei mir funktioniert, also dachte ich, ich würde es teilen.

Dies ist der beste Weg, um Bilder / Screenshots Ihrer App hinzuzufügen und Ihr Repository sauber zu halten.

Erstellen Sie einen screenshotOrdner in Ihrem Repository und fügen Sie die Bilder hinzu, die Sie anzeigen möchten.

Gehen Sie nun zu README.mdund fügen Sie diesen HTML-Code hinzu, um eine Tabelle zu bilden.

#### 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>

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

** Um den Bildpfad zu erhalten -> Gehen Sie zum screenshotOrdner und öffnen imageSie die Copy pathSchaltfläche und ganz rechts finden Sie die Schaltfläche.

Sie erhalten eine solche Tabelle in Ihrem Repository --->

Zum Huckepack von @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>wird von GitHub Markdown unterstützt. Bilder mit unterschiedlichen Höhen werden möglicherweise nicht vertikal nahe der Oberseite der Zelle ausgerichtet. Diese Eigenschaft behandelt es für Sie.