Bagaimana seseorang dapat menampilkan gambar berdampingan dalam GitHub README.md?

Saya mencoba menunjukkan perbandingan antara dua foto di README.md saya, itulah sebabnya saya ingin menampilkannya berdampingan. Berikut adalah bagaimana kedua gambar ditempatkan saat ini. Saya ingin menunjukkan dua skema warna Solarized berdampingan, bukan atas dan bawah. Bantuan akan sangat dihargai, terima kasih!

Cara termudah yang dapat saya pikirkan untuk menyelesaikan ini adalah dengan menggunakan tabel yang termasuk dalam penurunan harga rasa GitHub.

Untuk contoh spesifik Anda akan terlihat seperti ini:

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

Ini menciptakan tabel dengan Solarized Dark and Ocean sebagai header dan kemudian berisi gambar di baris pertama. Jelas Anda akan mengganti ...dengan tautan yang sebenarnya. The :s adalah opsional (Mereka hanya memusatkan konten dalam sel, yang agak tidak perlu dalam hal ini). Anda juga mungkin ingin memperkecil ukuran gambar sehingga mereka akan menampilkan sisi-sisi yang lebih baik.

Anda dapat menempatkan setiap gambar berdampingan dengan menuliskan markdown untuk setiap gambar pada baris yang sama.

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

Selama gambar tidak terlalu besar, mereka akan menampilkan sebaris seperti yang ditunjukkan oleh cuplikan layar file README dari GitHub ini:

Ini akan menampilkan tiga gambar berdampingan jika gambar tidak terlalu lebar.

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

Mirip dengan contoh lain, tetapi menggunakan ukuran html, saya menggunakan:

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

Berikut ini sebuah contoh

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

Saya menguji ini menggunakan Remarkable .

Jika, seperti saya, Anda menemukan bahwa jawaban @wiggin tidak berfungsi dan gambar masih tidak muncul dalam baris, Anda dapat menggunakan properti 'sejajarkan' dari tag gambar html dan beberapa jeda untuk mencapai efek yang diinginkan, misalnya:

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

Jelas, Anda harus menggunakan lebih banyak istirahat tergantung pada seberapa besar gambar: ya, tapi itu berhasil bagi saya jadi saya pikir saya akan berbagi.

Ini adalah cara terbaik untuk membuat menambahkan gambar / tangkapan layar aplikasi Anda dan menjaga repositori Anda tetap bersih.

Buat screenshotfolder di repositori Anda dan tambahkan gambar yang ingin Anda tampilkan.

Sekarang pergi ke README.mddan tambahkan kode HTML ini untuk membentuk tabel.

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

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

** Untuk mendapatkan jalur gambar -> Buka screenshotfolder dan buka imagedan di sisi paling kanan, Anda akan menemukan Copy pathtombol.

Anda akan mendapatkan tabel seperti ini di repositori Anda --->

Untuk membonceng @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>didukung oleh GitHub Markdown. Gambar dengan ketinggian yang bervariasi mungkin tidak sejajar secara vertikal di dekat bagian atas sel. Properti ini menanganinya untuk Anda.