321

README.md で 2 つの写真の比較を表示しようとしているため、それらを並べて表示したいと考えています。2 つの画像が現在どのように配置されているかを次に示します。上下ではなく、2 つのソラリゼーション カラー スキームを並べて表示したいと思います。助けていただければ幸いです、ありがとう！

4

9 に答える 9

434

これを解決する最も簡単な方法は、GitHub の風味付けされたマークダウンに含まれているテーブルを使用することです。

あなたの特定の例では、次のようになります。

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

これにより、Solarized Dark と Ocean をヘッダーとして持つテーブルが作成され、最初の行に画像が含まれます。明らかに...、を実際のリンクに置き換えます。s はオプションです (これら:はセルのコンテンツを中央に配置するだけで、この場合は不要です)。また、画像を縮小して並べて表示することもできます。

于 2014-06-20T05:05:24.420 に答える
247

画像の幅が広すぎない場合は、3 つの画像が並べて表示されます。

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>
于 2017-07-28T09:15:55.127 に答える
157

各画像のマークダウンを同じ行に記述することで、各画像を並べて配置できます。

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

画像が大きすぎない限り、次の GitHub の README ファイルのスクリーン ショットが示すように、インラインで表示されます。

インライン画像

于 2015-07-22T18:59:41.553 に答える
57

他の例と同様ですが、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を使用してこれをテストしました。

于 2016-08-12T20:39:51.440 に答える
18

このソリューションでは、画像の間にスペースを追加することもできます。これは、既存のすべてのソリューションの最良の部分を組み合わせたもので、醜い表の境界線を追加しません。

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

重要なのは、&nbsp;改行なしのスペース HTML エンティティを追加することです。これは、スペースをカスタマイズするために追加および削除できます。

この例は、こちらの GitHub でライブで見ることができます。

于 2021-01-29T04:17:39.113 に答える