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

line-box-thumbnail

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

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

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

画像サンプル

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

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

画像サンプル

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

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

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

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>

右画像のコードサンプル

<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>
line-box-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。