我试图在我的README中显示两张照片之间的比较。这就是为什么我想把它们放在一起展示。下面是这两张图片目前的放置方式。我想并排显示两种太阳能配色方案,而不是顶部和底部。非常感谢您的帮助,谢谢!
当前回答
以@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支持。不同高度的图像可能不会在单元格顶部附近垂直对齐。这个属性为您处理它。
其他回答
以@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支持。不同高度的图像可能不会在单元格顶部附近垂直对齐。这个属性为您处理它。
这将显示三个图像并排如果图像不是太宽。
<p float="left">
<img src="/img1.png" width="100" />
<img src="/img2.png" width="100" />
<img src="/img3.png" width="100" />
</p>
如果,像我一样,你发现@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...
显然,你必须根据图像的大小使用更多的休息时间:是的,这很糟糕,但对我来说很管用,所以我想我应该分享一下。
类似于其他例子,但使用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"/>
我用Remarkable进行了测试。
这个解决方案还允许您在图像之间添加空间。它结合了所有现有解决方案的最佳部分,并且没有添加任何丑陋的表边框。
<p align="center">
<img alt="Light" src="./light.png" width="45%">
<img alt="Dark" src="./dark.png" width="45%">
</p>
关键是添加 不间断空格HTML实体,您可以添加和删除它们以自定义空格。
你可以在GitHub上的transituring -bullshit/nextjs- concept -starter-kit上看到这个例子。
推荐文章
- 如何修复Github页面上的HTTP 404 ?
- 如何显示数学方程在一般github的markdown(不是github的博客)
- 无法推送到远程分支,无法解析到分支
- 如何在GitHub上创建自己的存储库?
- Github“更新被拒绝,因为远程包含您在本地没有的工作。”
- 如何在不同的用户名下推送到GitHub ?
- 在最初创建提交的GitHub上找到一个Pull Request
- Git凭据助手-更新密码
- 标签和释放的区别是什么?
- 切换到另一个Git标记
- Heroku和GitHub:“项目无法检索,内部服务器错误”
- 将现有项目推到Github
- 在git存储库中处理密码的最佳实践是什么?
- Git:无法解决主机github.com错误,克隆远程仓库在Git
- 为什么'git commit'不保存我的更改?