내 README.md에서 두 사진을 비교하여 표시하려고합니다. 따라서 나란히 표시하고 싶습니다. 두 이미지가 현재 배치되는 방법은 다음과 같습니다 . 위와 아래가 아닌 두 개의 태양열 색 구성표를 나란히 표시하고 싶습니다. 도움을 주시면 감사하겠습니다.
내 README.md에서 두 사진을 비교하여 표시하려고합니다. 따라서 나란히 표시하고 싶습니다. 두 이미지가 현재 배치되는 방법은 다음과 같습니다 . 위와 아래가 아닌 두 개의 태양열 색 구성표를 나란히 표시하고 싶습니다. 도움을 주시면 감사하겠습니다.
답변:
이 문제를 해결하는 가장 쉬운 방법 은 GitHub의 풍미 마크 다운에 포함 된 테이블을 사용하는 것입니다 .
구체적인 예를 들면 다음과 같습니다.
Solarized dark | Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png) | ![](https://...Ocean.png)
머리글로 Solarized Dark 및 Ocean이 포함 된 테이블을 만든 다음 첫 번째 행의 이미지를 포함합니다. 분명히 당신은 ...
실제 링크로 바꿀 것 입니다. :
들 (그들은 단지이 경우에는 좀 필요가 세포에있는 내용을 중심으로) 선택 사항입니다. 또한 이미지를 더 작게 나란히 표시하도록 크기를 줄이려고 할 수 있습니다.
![](https://...Ocean.png)
이 대괄호 사이에 이미지 위에 마우스를 올릴 때 표시되는 대체 텍스트를 추가 할 수 있습니다.
각 이미지의 마크 다운을 같은 줄에 작성하여 각 이미지를 나란히 배치 할 수 있습니다.
![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")
이미지가 너무 크지 않은 한, GitHub의 README 파일의 스크린 샷에서 보여주는 것처럼 인라인으로 표시됩니다.
이미지가 너무 넓지 않으면 3 개의 이미지가 나란히 표시됩니다.
<p float="left">
<img src="/img1.png" width="100" />
<img src="/img2.png" width="100" />
<img src="/img3.png" width="100" />
</p>
<p align="middle">
이미지를 중앙에 정렬하는 데 사용 했습니다.
width="32%"
3 개의 이미지를 정렬 할 때 이미지를 전체 너비의 백분율로 지정하는 것을 선호합니다.
다른 예제와 비슷하지만 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 사용하여 테스트했습니다 .
<img height="350" hspace="20"/>
문제의 이미지 사이를 구분자로 사용 했습니다 ( 흔들기의 대답이 효과 가 없었습니다).
나처럼 @wiggin answer가 작동하지 않고 이미지가 여전히 인라인으로 나타나지 않으면 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...
분명히, 당신은 이미지의 크기에 따라 더 많은 휴식을 사용해야합니다.
hspace
사진 사이에 충분한 공간이없는 경우 깔끔한 작은 트릭입니다. github이 실제로 구문 분석하는 것을 몰랐습니다.
앱의 이미지 / 스크린 샷을 추가하고 리포지토리를 깨끗하게 유지하는 가장 좋은 방법입니다.
screenshot
저장소에 폴더를 작성하고 표시 할 이미지를 추가하십시오.
이제이 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>
** 이미지 경로를 얻으려면-> screenshot
폴더로 이동하여 image
가장 오른쪽에있는 및을 열면 Copy path
버튼이 있습니다.
당신은 당신의 저장소에 이와 같은 테이블을 얻을 것이다 --->
@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="top">...</td>
GitHub Markdown에서 지원됩니다. 높이가 변하는 이미지는 셀 상단 근처에서 세로로 정렬되지 않을 수 있습니다. 이 속성은 당신을 위해 그것을 처리합니다.