2

画像のサムネイルをいくつか使ってブログ投稿を書こうとしています。私は次の方法でコードを使用しています

...[前のマークダウン コンテンツ]...

[{% img left https://lh5.googleusercontent.com/-UjFXd_iX4wg/UK_LGHwB1GI/AAAAAAAACGM/Y9dOC2JLMu0/s400/2012-11-01%252010.51.22.jpg '電気ケトルの電源ボタン' %}](https ://picasaweb.google.com/lh/photo/v54UgP-UYdQKngGBXIkVdtMTjNZETYmyPJy0liipFm0?feat=directlink)

[{% img left https://lh5.googleusercontent.com/-pZWML6wLvMk/UK_NhINxrh​​I/AAAAAAAACHc/8dvYICW8AA8/s400/2012-11-01%252011.01.24.jpg '外付けハード ドライブの電源ボタン' %}]( 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 'IKEA ベッドサイド ランプの電源ボタン' %}]( https://picasaweb.google.com/lh/photo/2O6MNRL11LHZaOWy5ucSFdMTjNZETYmyPJy0liipFm0?feat=directlink)

...[後のマークダウン コンテンツ]...

これは正常に機能しますが、この下にテキストを配置すると、新しい行ではなく最後の画像の右側から始まります。

画像のグリッドを作成し、グリッドの後にテキストを続けるにはどうすればよいですか? マークダウンを使って記事を書いています。

4

1 に答える 1

3

適切である場合とそうでない場合がありますが、同様のユースケース用に Jekyll プラグインを作成しました - https://github.com/matthewowen/jekyll-slideshow

これは、フルサイズの画像をライトボックスに表示できるようにするサムネイルのグリッドを生成するフルサイズの画像を持つことを目的としています。

そうでない場合は、CSS を使用してこれを行うことをお勧めします。構文の「左」部分は、追加する CSS クラスを示しているだけです。この場合、Octopress の CSS には、このクラスを左にフロートさせるルールが含まれていると思います。これにより、クラスが互いに並んで表示されますが、テキストが回り込むようになります。代わりに「グリッド」などを使用し、CSS ルールを追加して、そのクラスの画像にインライン ブロック表示属性を与えることができます。

于 2012-12-01T23:16:29.003 に答える