WordPressで記事の画像を横に並べる簡単な方法

WordPress
 記事の中に複数の画像を挿入すると何もしないと縦に並びます。小さな画像を連続で貼り付けた時など、横に並べたくなりますよね。でもCSSでスタイル設定する程でもないし、ここだけちょこっと横に並べたいときが結構あります。そんな時は以下のタグを入れてやると簡単に並べることができます。
<div style="float:left;">
  <img src="img1" />
</div>
<div style="float:left;">
  <img src="img2" />
</div>
<div style="clear: both;"></div>

並べたい画像をstyle=“float:left”でくくって、clear=“both”で閉じます。

画像の隙間を指定したいときはmargin設定を追加してください。
<div style="float:left; margin: 20px">
  <img src="img1" />
</div>
<div style="float:left; margin: 20px">
  <img src="img2" />
</div>
<div style="clear: both;"></div>

 

タイトルとURLをコピーしました