web-dev-qa-db-fra.com

Flux de texte autour d'une image dans (GitHub) Markdown

J'ai une longue image étroite que je veux afficher en haut à droite d'un fichier README.md sur GitHub. J'ai essayé plusieurs choses pour l'aligner correctement et j'ai actuellement

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

Cela fonctionne en ce sens que l'image est alignée sur le côté droit, mais est plutôt inutile car tout le contenu qui se trouve en dessous de l'image dans le fichier Markdown s'affiche sous le bas de l'image, plutôt qu'à gauche.

Existe-t-il un moyen de faire passer le texte autour de l'image (sans se débarrasser des en-têtes et des paragraphes)?

githubmarkdown
53
Jeroen De Dauw

Le align="right" (ou left) fonctionne dans GitHub Markdown:

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

Cela fonctionne pour moi ( uniquement pour jekyll, cela ne fonctionne pas pour le démarquage github ): Mettez le code ci-dessous sur votre démarque de contenu (je mets le premier ligne pour une meilleure organisation)

`` ''

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

`` ''

Et fait référence à votre imagem comme suit: [![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-Android){: .image-left } Your Text comes here...

Remarque la classe . Image-left en plus de l'url de l'image.

Les résultats finaux son ici: Films de l'année page jekyll github

2
Richard Lee

Dans la démarque, vous pouvez ajouter des attributs supplémentaires aux balises. Par exemple, j'utilise ceci pour ce que vous avez l'intention de faire:

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