floatでキャプション付き画像にテキストを回り込ませる【CSS】

floatでテキストを画像に回り込ませるサンプルを作ったのでメモ。

floatでテキストを回り込ませるデモ（デモ）
1. HTML
2. CSS
まとめ

floatでテキストを回り込ませるデモ（デモ）

ブラウザの幅を小さくすると、画像にテキストが回り込みます。PC版、SP版でも同じコードが使えます。

PC版

SP版

実際の動作はこちらでご確認ください！（別ウィンドウが開きます）

デモを確認する

HTML

HTMLでは、それぞれイメージの要素とテキストの要素があります。

<div class="content">
    <div class="inner">
        <div class="img_area">
        <img src="https://m-kenomemo.com/sample/gallery-change/images/photo09.jpg" alt="">
        <span class="caption">ニャン太さん（5歳）</span>
        </div>
        <div class="txt_area">
        <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</p>
        <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</p>
        </div>
    </div>
</div>

CSS

CSSではイメージの要素にfloatを設定しています。
ポイントはこれだけです！！

floatをright（右）にしているので、画像が右側に表示されます。

p {
　margin:.5em 0;
}
img {
    width:100%;
    height:auto;
}
.img_area {
    width:30%;
    float:right;
    padding-left:10px;
}
.caption {
    display:block;
    text-align:right;
    font-size:0.9em;
}
.txt_area {
    width:auto;
}

floatの値をleft（左）にすると、画像が左側になりテキストが右に回り込みます。

See the Pen float_example0617 by donguri2020 (@m-ke) on CodePen.

簡単にできるとはいえ、ハマるポイントがあるのでメモ。
回り込ませる要素をイメージ、回り込ませたい要素をテキストとします。