レスポンシブな画像とテキストの横並びを表示する

レスポンシブな画像とテキストの横並びを表示する方法を紹介します。

実際には以下のような表示となります。

スマホでご覧の方は1カラムで表示されていると思いますが、
PCでは画像とテキストが横並びの2カラム表示になります。

PCでは2カラム、スマホでは1カラムに自動調整されます。

画像の左右はセレクタで変更できます。
左画像ならline-box-left-imageとなります。

右画像ならline-box-right-imageとなります。

画像のコードは先に書くようにしてください。
あとに書くとレスポンシブしなくなります。

画像とテキストを横並びで表示するHTMLコード

以下のコードを記事内に記述してください。

左画像のHTMLコード

<div class="line-box">
<div class="line-box-left-image"><img src="画像URL" alt="画像サンプル" width="250" height="auto" itemprop="image"/></div>
<div class="line-box-text">

ここにテキストを記入します。
テキストの前後は1行空行を作ってください。

</div>
</div>

右画像のHTMLコード

<div class="line-box">
<div class="line-box-right-image"><img src="画像URL" alt="画像サンプル" width="250" height="auto" itemprop="image"/></div>
<div class="line-box-text">

ここにテキストを記入します。
テキストの前後は1行空行を作ってください。

</div>
</div>