Поток текста вокруг изображения в (GitHub) Markdown

У меня есть узкое длинное изображение, которое я хочу отобразить в правом верхнем углу файла README.md на GitHub. Я пытаюсь несколько вещей, чтобы выровнять его правильно и в настоящее время

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

Это работает так, что изображение выравнивается с правой стороны, но оно бесполезно, поскольку все содержимое, находящееся ниже в изображении в файле Markdown, отображается под нижней частью изображения, а не слева от него.

Есть ли способ иметь поток текста вокруг изображения (не избавляясь от заголовков и абзацев)?

Ответы

Ответ 1

Атрибут align="right" работает в GitHub Markdown:

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

Ответ 2

В методе уценки вы можете добавить дополнительные атрибуты к тегам. Например, я использую это для того, что вы намереваетесь сделать:

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

Ответ 3

Он работает для меня (только для jekyll, он не работает для уклонения github): Поместите нижеприведенный код на уценку содержания (я поставил первую строку для лучшей организации)

`` `

<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, кроме URL-адреса изображения.

Окончательный результат его здесь: Страница фильмов года jekyll github

Ответ 4

То, что вы описываете, является "плавающим" изображением, которое позволяет обтекать текст. Есть номер good turtorials о плавании в CSS, если вы хотите узнать больше об этой теме. В то же время, чтобы получить изображение для плавания в Markdown, вы можете обернуть изображение в div и float, используя div:

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