【CSS】囲み枠を画面が幅が広い時は横並び、狭い時は縦並びにする方法

divで作成した囲み枠を画面幅が広い時は横並び、画面幅が狭い時は縦並びにするサンプルを紹介します。

画面幅によって、自動で横並び、縦並びが切り替わるので、囲み枠(div)の中には、画像や広告などを配置するのにとても便利です。

サンプルです。

左側＊＊＊ここに画像や広告を配置＊＊＊

右側＊＊＊ここに画像や広告を配置＊＊＊

<div style="margin:auto; text-align:center; width:100%;">
    <div style="display:inline-block; padding:10px;">
        <p>＊＊＊ここに画像や広告を配置＊＊＊</p>
    </div>
    <div style="display:inline-block; padding:10px;">
        <p>＊＊＊ここに画像や広告を配置＊＊＊</p>
    </div>
</div>