Làm cách nào để hiển thị hình ảnh cạnh nhau trong GitHub README.md?

Tôi đang cố gắng hiển thị so sánh giữa hai ảnh trong README.md của mình, đó là lý do tại sao tôi muốn hiển thị chúng cạnh nhau. Đây là cách hai hình ảnh được đặt hiện tại. Tôi muốn hiển thị hai bảng màu Solarized cạnh nhau thay vì trên và dưới. Giúp đỡ sẽ được nhiều đánh giá cao, cảm ơn!

Cách dễ nhất tôi có thể nghĩ đến để giải quyết vấn đề này là sử dụng các bảng có trong phần đánh dấu hương vị của GitHub.

Theo ví dụ cụ thể của bạn, nó sẽ trông giống như thế này:

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

Điều này tạo ra một bảng với Solarized Dark and Ocean làm tiêu đề và sau đó chứa các hình ảnh ở hàng đầu tiên. Rõ ràng bạn sẽ thay thế ...bằng liên kết thực sự. Các :s là tùy chọn (Chúng chỉ tập trung nội dung trong các ô, điều này không cần thiết trong trường hợp này). Ngoài ra, bạn có thể muốn thu nhỏ hình ảnh để chúng sẽ hiển thị cạnh nhau tốt hơn.

Bạn có thể đặt từng hình ảnh cạnh nhau bằng cách viết đánh dấu cho mỗi hình ảnh trên cùng một dòng.

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

Miễn là hình ảnh không quá lớn, chúng sẽ hiển thị nội tuyến như được minh họa bằng ảnh chụp màn hình này của tệp README từ GitHub:

Điều này sẽ hiển thị ba hình ảnh cạnh nhau nếu hình ảnh không quá rộng.

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

Tương tự như các ví dụ khác, nhưng sử dụng kích thước html, tôi sử dụng:

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

Đây là một ví dụ

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

Tôi đã thử nghiệm điều này bằng cách sử dụng Remarkable .

Nếu, giống như tôi, bạn thấy rằng câu trả lời @wiggin không hoạt động và hình ảnh vẫn không xuất hiện nội tuyến, bạn có thể sử dụng thuộc tính 'căn chỉnh' của thẻ hình ảnh html và một số ngắt để đạt được hiệu ứng mong muốn, ví dụ:

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

Rõ ràng, bạn phải sử dụng nhiều thời gian nghỉ hơn tùy thuộc vào độ lớn của hình ảnh: khủng khiếp có, nhưng nó hiệu quả với tôi nên tôi nghĩ tôi muốn chia sẻ.

Đây là cách tốt nhất để thêm hình ảnh / ảnh chụp màn hình của ứng dụng của bạn và giữ cho kho lưu trữ của bạn trông sạch sẽ.

Tạo một screenshotthư mục trong kho lưu trữ của bạn và thêm hình ảnh bạn muốn hiển thị.

Bây giờ đi đến README.mdvà thêm mã HTML này để tạo thành một bảng.

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

bên trong <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** Để có đường dẫn hình ảnh -> Chuyển đến screenshotthư mục và mở imagevà ở phía bên phải hầu hết, bạn sẽ tìm thấy Copy pathnút.

Bạn sẽ nhận được một bảng như thế này trong kho lưu trữ của bạn --->

Để cõng @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>được hỗ trợ bởi GitHub Markdown. Hình ảnh với độ cao khác nhau có thể không thẳng hàng gần đỉnh của tế bào. Khách sạn này xử lý nó cho bạn.