问题
I'm trying to write a blog post with a few image thumbnails. I'm using the code in the following way
...[markdown content before]...
[{% img left https://lh5.googleusercontent.com/-UjFXd_iX4wg/UK_LGHwB1GI/AAAAAAAACGM/Y9dOC2JLMu0/s400/2012-11-01%252010.51.22.jpg 'Power button of an electric kettle' %}](https://picasaweb.google.com/lh/photo/v54UgP-UYdQKngGBXIkVdtMTjNZETYmyPJy0liipFm0?feat=directlink)
[{% img left https://lh5.googleusercontent.com/-pZWML6wLvMk/UK_NhINxrhI/AAAAAAAACHc/8dvYICW8AA8/s400/2012-11-01%252011.01.24.jpg 'Power button of an external hard drive' %}](https://picasaweb.google.com/lh/photo/F8GpZ42t2k7OnFWfgzGDW9MTjNZETYmyPJy0liipFm0?feat=directlink)
[{% img left https://lh6.googleusercontent.com/-1L7v_5CYtq8/UK_NndJB_HI/AAAAAAAACHk/se84006Yoyo/s400/2012-11-01%252011.37.17.jpg 'Power button of an IKEA bedside lamp' %}](https://picasaweb.google.com/lh/photo/2O6MNRL11LHZaOWy5ucSFdMTjNZETYmyPJy0liipFm0?feat=directlink)
...[markdown content after]...
This works fine, but if I put some text under this, it starts on the right side of the last image instead of on a new line.
How can I have a grid of images and have the text continue after the grid? I'm using markdown to write the post.
回答1:
It may or may not be appropriate for you, but I wrote a Jekyll plugin for a similar use case - https://github.com/matthewowen/jekyll-slideshow
That's geared towards having full size images where you want to generate a grid of thumbnails that allow the full size images to appear in a lightbox.
If that isn't your exact case, my suggestion would be to do this using CSS. The 'left' part of your syntax just denotes the CSS class to add. In this case, I guess Octopress's CSS ships with a rule to float this class left - this makes them appear alongside each other, but lets the text wrap around it. You could instead use something like 'grid' and then add a CSS rule to give images of that class an inline-block display attribute.
来源：https://stackoverflow.com/questions/13663530/how-to-arrange-images-in-a-grid-in-octopress-using-markdown