在（GitHub）Markdown中的图像周围流动文本

Question

我想要在GitHub上的README.md文件的右上角显示一个狭长的图像。我一直在尝试几种方法来使它正确对齐并且目前已经

<p align="right">
  <img src="doc/subpagelist.png" />
</p>

这是因为图像在右侧对齐，但是相当无用，因为Markdown文件中图像下方的所有内容都显示在图像的底部，而不是显示在图像的左侧。 / p>

有没有办法让文本在图像周围流动（没有删除标题和段落）？

Answer 1

align="right"（或left）属性适用于GitHub Markdown：

<img align="right" src="doc/subpagelist.png">

Answer 2

在markdown中，您可以为标签添加额外的属性。例如，我将此用于您打算做的事情：

![Some Title](http://placehold.it/image.jpeg){:style="float: right;margin-right: 7px;margin-top: 7px;"}

Answer 3

它适用于我（仅适用于jekyll，它不适用于github markdown ）： 将代码放在您的内容标记下方（我放在第一行以便更好地组织）

```

<style type="text/css">
.image-left {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: right;
}
</style>

```

并将您的图像引用如下： [![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...

注意图片网址旁边的 .image-left 类。

最终结果如下：https://f.vimeocdn.com

Answer 4

您所描述的是图像的“浮动”，它允许文本在其周围流动。如果您想了解有关此主题的更多信息，请在CSS中浮动number good turtorials {{3}}。同时，要使图像在Markdown中浮动，您可以将图像包装在div中并使用以下内容浮动该div：

<div style="float: right">
    ![Replace this with your image](http://placehold.it/85x85 "Title")
</div>