我试图在我的README中显示两张照片之间的比较。这就是为什么我想把它们放在一起展示。下面是这两张图片目前的放置方式。我想并排显示两种太阳能配色方案,而不是顶部和底部。非常感谢您的帮助,谢谢!
当前回答
我找到了一种方法,让3张图片在同一条线上左/中/右对齐,所以它会自动在它们之间添加合适的空间:
<p align="center">
<img src="..." align="left">
<img src="...">
<img src="..." align="right">
</p>
这是我的实际用例的样子:
其他回答
以@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支持。不同高度的图像可能不会在单元格顶部附近垂直对齐。这个属性为您处理它。
这是添加应用图像/截图的最佳方法,可以保持存储库的整洁。
在存储库中创建一个截图文件夹,并添加想要显示的图像。
现在进入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>
转到截图文件夹,打开图片,在最右边,你会发现复制路径按钮。
您将在存储库中得到这样一个表——>
这将显示三个图像并排如果图像不是太宽。
<p float="left">
<img src="/img1.png" width="100" />
<img src="/img2.png" width="100" />
<img src="/img3.png" width="100" />
</p>
关于markdown表语法,请参阅:
https://www.markdownguide.org/extended-syntax/#tables
快速总结:
为了快速理解在其他答案中使用的语法,它有助于从更完整的直观和更容易记住的语法开始,然后是具有相同结果的最小化版本。
基本的例子:
| Header A | Header B |
| -------------- | -------------- |
| row 1 col 1 | row 1 col 2 |
| row 2 column 1 | row 2 column 2 |
同样的结果在一个更简约的形式(单元格宽度可以变化):
Header A | Header B
--- | ---
row 1 col 1 | row 1 col 2
row 2 column 1 | row 2 column 2
与这个问题更相关的是:顶部有标签的并排图像:
label 1 | label 2
--- | ---
 | 
(使用:——,——:,和:——:用于列中的(文本)对齐,分别为:左,右,中)
如果,像我一样,你发现@wiggin答案不工作,图像仍然没有出现在行内,你可以使用html图像标签的'align'属性和一些中断来实现所需的效果,例如:
# 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...
显然,你必须根据图像的大小使用更多的休息时间:是的,这很糟糕,但对我来说很管用,所以我想我应该分享一下。
推荐文章
- 在Markdown Jekyll中使用图像说明
- 如何修改GitHub拉请求?
- 如何在Github和本地删除最后n次提交?
- 如何将文件附加到GitHub问题?
- 如何添加谷歌分析跟踪ID到GitHub页面
- 差异语法突出显示在Github Markdown
- /dist目录在开源项目中的意义是什么?
- 我如何从现有回购的分支创建一个新的GitHub回购?
- 在git中压缩提交是什么意思?
- 如何在GitHub上找到存储库项目的创建日期?
- 如何设置一个git项目使用外部回购子模块?
- 强制LF eol在git的回购和工作副本
- 防止在GitHub上推送到master ?
- 我如何在github上引用特定问题的评论?
- 我如何才能看到我在Github上看到的所有问题?