在(GitHub)Markdown中的图像周围流动文本

Question

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

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

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

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

Answer 1

该align="right"(或left)属性适用于GitHub的降价:

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

Answer 2

align="left"工作正常。要再次中断对齐，请使用<br clear="left"/>(或<br clear="right"/>) 标签：

<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image

<br clear="left"/>

A "newline". This text doesn't float anymore, is left-aligned.

Answer 3

在 Markdown 中，您可以向标签添加额外的属性。例如，我用它来做你想做的事情：

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

Answer 4

它适用于我（仅适用于 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...

请注意除图像 url 之外的.image-left类。

最终结果在这里：年度电影 jekyll github 页面

Answer 5

您所描述的是图像的“浮动”，它允许文本在其周围流动。如果您想了解有关 CSS 浮动的更多信息，有许多关于 CSS浮动的好教程 。同时，要使图像在 Markdown 中浮动，您可以将图像包装在 div 中并使用以下方法浮动该 div：

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