我试图在我的README中显示两张照片之间的比较。这就是为什么我想把它们放在一起展示。下面是这两张图片目前的放置方式。我想并排显示两种太阳能配色方案,而不是顶部和底部。非常感谢您的帮助,谢谢!


当前回答

我找到了一种方法,让3张图片在同一条线上左/中/右对齐,所以它会自动在它们之间添加合适的空间:

<p align="center">
      <img src="..." align="left">
      <img src="...">
      <img src="..." align="right">
</p>

这是我的实际用例的样子:

其他回答

这个解决方案还允许您在图像之间添加空间。它结合了所有现有解决方案的最佳部分,并且没有添加任何丑陋的表边框。

<p align="center">
  <img alt="Light" src="./light.png" width="45%">
&nbsp; &nbsp; &nbsp; &nbsp;
  <img alt="Dark" src="./dark.png" width="45%">
</p>

关键是添加&nbsp;不间断空格HTML实体,您可以添加和删除它们以自定义空格。

你可以在GitHub上的transituring -bullshit/nextjs- concept -starter-kit上看到这个例子。

这是添加应用图像/截图的最佳方法,可以保持存储库的整洁。

在存储库中创建一个截图文件夹,并添加想要显示的图像。

现在进入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>

转到截图文件夹,打开图片,在最右边,你会发现复制路径按钮。

您将在存储库中得到这样一个表——>

以@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 =“顶级”>…</td>由GitHub Markdown支持。不同高度的图像可能不会在单元格顶部附近垂直对齐。这个属性为您处理它。

我找到了一种方法,让3张图片在同一条线上左/中/右对齐,所以它会自动在它们之间添加合适的空间:

<p align="center">
      <img src="..." align="left">
      <img src="...">
      <img src="..." align="right">
</p>

这是我的实际用例的样子:

这将显示三个图像并排如果图像不是太宽。

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