ภาพหนึ่งภาพสามารถแสดงเคียงข้างกันใน GitHub README.md ได้อย่างไร?

ฉันพยายามแสดงการเปรียบเทียบระหว่างสองภาพใน README.md ของฉันซึ่งเป็นสาเหตุที่ฉันต้องการแสดงภาพแบบเคียงข้างกัน นี่คือวิธีการวางภาพสองภาพในขณะนี้ ฉันต้องการแสดงชุดสีโซล่าร์สองชุดแบบเคียงข้างกันแทนที่จะเป็นแบบบนและล่าง ความช่วยเหลือจะได้รับการชื่นชมมากขอบคุณ!

วิธีที่ง่ายที่สุดที่ฉันสามารถคิดได้ในการแก้ปัญหานี้คือการใช้ตารางที่รวมอยู่ในการทำเครื่องหมายรสชาติของ GitHub

สำหรับตัวอย่างเฉพาะของคุณมันจะมีลักษณะดังนี้:

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

สิ่งนี้จะสร้างตารางที่มี Solarized Dark และ Ocean เป็นส่วนหัวจากนั้นมีรูปภาพในแถวแรก เห็นได้ชัดว่าคุณจะแทนที่...ด้วยลิงค์จริง :s เป็นตัวเลือก (พวกเขาเพียงแค่ศูนย์เนื้อหาในเซลล์ซึ่งเป็นที่ไม่จำเป็นครับในกรณีนี้) นอกจากนี้คุณอาจต้องการลดขนาดรูปภาพเพื่อให้แสดงได้ดีขึ้นแบบคู่ขนาน

คุณสามารถวางภาพแต่ละภาพเคียงข้างกันได้โดยเขียน markdown สำหรับแต่ละภาพในบรรทัดเดียวกัน

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

ตราบใดที่ภาพไม่ใหญ่เกินไปพวกเขาจะแสดงแบบอินไลน์ตามภาพหน้าจอของไฟล์ README จาก GitHub:

การดำเนินการนี้จะแสดงภาพสามภาพเคียงข้างกันหากภาพไม่กว้างเกินไป

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

คล้ายกับตัวอย่างอื่น ๆ แต่ใช้การปรับขนาด html ฉันใช้:

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

นี่คือตัวอย่าง

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

ผมทดสอบนี้โดยใช้ที่โดดเด่น

หากเช่นฉันคุณพบว่า @wiggin คำตอบไม่ทำงานและภาพยังไม่ปรากฏในบรรทัดคุณสามารถใช้คุณสมบัติ 'จัดตำแหน่ง' ของแท็กรูปภาพ html และตัวแบ่งบางอย่างเพื่อให้ได้ผลตามที่ต้องการตัวอย่างเช่น

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

เห็นได้ชัดว่าคุณต้องใช้เวลาพักมากขึ้นโดยขึ้นอยู่กับว่าภาพใหญ่ขนาดไหน: แย่มากใช่ แต่มันได้ผลสำหรับฉันดังนั้นฉันคิดว่าฉันจะแบ่งปัน

นี่เป็นวิธีที่ดีที่สุดในการเพิ่มภาพ / ภาพหน้าจอของแอปและทำให้ที่เก็บข้อมูลของคุณดูสะอาด

สร้างscreenshotโฟลเดอร์ในที่เก็บของคุณและเพิ่มภาพที่คุณต้องการแสดง

ตอนนี้ไปที่README.mdและเพิ่มรหัส HTML นี้เพื่อสร้างตาราง

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

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

** ในการรับเส้นทางภาพ -> ไปที่screenshotโฟลเดอร์และเปิดimageและด้านขวาสุดคุณจะพบCopy pathปุ่ม

คุณจะได้รับตารางเช่นนี้ในที่เก็บของคุณ --->

หากต้องการ piggyback ออกจาก @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>ได้รับการสนับสนุนโดย GitHub Markdown รูปภาพที่มีความสูงต่างกันอาจไม่จัดเรียงในแนวตั้งใกล้กับส่วนบนของเซลล์ คุณสมบัตินี้จัดการให้คุณ