在 (GitHub) Markdown 中围绕图像排列文本答案

【问题标题】：Flow text around an image in (GitHub) Markdown在 (GitHub) Markdown 中围绕图像排列文本
【发布时间】：2013-10-05 04:23:45
【问题描述】：

我想在 GitHub 上的 README.md 文件的右上角显示一个窄长的图像。我一直在尝试几件事来让它正确对齐，目前有

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

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

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

【问题讨论】：

标签： github markdown

【解决方案1】：

align="right"（或left）属性在 GitHub Markdown 中有效：

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

【讨论】：

但不适用于标题。如何对齐标题旁边的图像？
太棒了！非常感谢，我一直在寻找这个...也适用于 Gitlab :)
@theonlygusti 要将图片放在标题旁边，请将右对齐图片放在标题之前，中间有一个空行。
图片后面还有clear: both吗？我使用的图像相当高，它正在渗透到下一个 H1 部分。
@JoshuaPinter 您需要使用例如<br clear="right"/>。使用 style="clear: both" 不起作用的原因与 style="float: right" 不起作用的原因相同：style 属性被删除。

【解决方案2】：

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

最终结果在这里：Movies of the Year jekyll github page

【讨论】：

CSS 行应该是'float:left;'而不是“浮动：对；”向左移动？
关于：“仅适用于 jekyll，不适用于 Github markdown”？说明：设置GitPages看<user>.github.io/<name>.io，不是github.com/<user>/<name>.io

【解决方案3】：

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

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

【讨论】：

这似乎不适用于 github 风格的降价。
这在我的 Azure DevOps 私有 Git 存储库中也不起作用（当然，现在是 may very well be github.com）

【解决方案4】：

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.

【讨论】：

【解决方案5】：

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

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

【讨论】：

div 仍然存在，但 Github 删除了所有包含的样式信息。
我没有在 GitHub 中尝试过，但它在 Azure DevOps Markdown 中很有效。