如何使用Markdown在八度网格中排列图像

我想用几张图片缩略图编写一篇博文。我正在使用的代码以下列方式如何使用Markdown在八度网格中排列图像

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

这工作得很好，但如果我把一些文字下面这一点，它开始于最后一个图像的右侧，而不是在新的一行。

如何获取网格图像并在网格后面显示文本？我正在使用降价来撰写帖子。

来源

2012-12-01 Danish

它可能会或可能不适合你，但我写了一个哲基尔插件用于类似用途的情况下 - https://github.com/matthewowen/jekyll-slideshow

这是对有要生成缩略图的一个网格，使全尺寸图像面向全尺寸图像出现在灯箱中。

如果这不是你确切的情况，我的建议是使用CSS来做到这一点。您的语法的“左”部分只是表示要添加的CSS类。在这种情况下，我猜Octopress的CSS会附带一个规则来让这个类保持浮动状态 - 这使得它们彼此并排，但让文本环绕它。您可以改为使用“网格”之类的内容，然后添加一条CSS规则，以便为该类的图像指定一个内嵌块显示属性。

来源

2012-12-01 23:16:29 heliotrope

谢谢你，我觉得很愚蠢，如果我简单地从'{％img ...％}'部分省略css类，则图像以内联方式出现，完全如我所愿。我从来没有想过尝试它，直到我读到你的建议 – Danish

如何使用Markdown在八度网格中排列图像

回答

相关问题