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


当前回答

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

<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
--- | ---
![](https://...image1.png) | ![](https://...image2.png)

(使用:——,——:,和:——:用于列中的(文本)对齐,分别为:左,右,中)

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

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

我用Remarkable进行了测试。

您可以将每个图像并排放置,方法是将每个图像的标记写在同一行上。

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

只要图像不是太大,它们将内联显示,如下图所示,这是一个来自GitHub的README文件截图:

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

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

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