Flow text around an image in (GitHub) Markdown

I have a narrow long image that I want to display at the top right of a README.md file on GitHub. I have been trying several things to get it aligned right and currently have

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

This works in that the image is aligned on the right side, though is rather useless as all content that is below in image in the Markdown file gets displayed under the bottom of the image, rather then to the left of it.

Is there a way to have the text flow around the image (without getting rid of headers and paragraphs)?

56628 次浏览
小开

What you are describing is "floating" of an image, which allows text to flow around it. There are a number of good turtorials about floating in CSS if you want to learn more about this topic. In the mean time, to get an image to float in Markdown you can wrap the image in a div and float that div using:

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

The align="right" (or left) attribute works in GitHub Markdown:

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

In markdown you can add extra attributes to tags. For instance I use this for what you intend to do:

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

It works for me (only for jekyll, it does not work for Github markdown): Put the code below in your content markdown (I have put it on the first line for better organization)


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

And refers to your image as follows: [![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...

Note the .image-left class besides the image url.

The final results are here: Movies of the Year jekyll github page

小开

align="left" works fine. To break the alignment again, use a <br clear="left"/> (or <br clear="right"/>) tag:

<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.

提交答案