画像下揃えでテキストを回り込ませる方法

ある日、支給されたデザインを確認したときに
画像とテキストが下揃えになったテキスト回り込みに出会いました。
普通floatでテキストを回り込ませると

上の図のように、画像が浮くことでそこにテキストが回り込み、
画像の高さ分を超えたテキストは幅いっぱいに表示される形になりますが、
支給されたデザインは、下のような状態になっていました。

画像を下に揃えるとなると、どうしたもんか。。

画像とテキストを下揃えにして、テキストを回り込ませたい。
レスポンシブにも対応にしたい。
できればjsは使いたくない。
という~~わがままな~~願いを叶えるべく、試行錯誤しました。

結論から言うと、jsは使いましたが
下揃えのテキスト回り込み（レスポンシブ対応）を再現できたので
ここに共有したいと思います。

【失敗例】float以外で試したこと
実装
まとめ

【失敗例】float以外で試したこと

試行錯誤の中で、float以外で再現できる可能性はないかも探り、そして失敗しました。
せっかくなので、失敗例も共有しておきます。
失敗例いらないからいち早く実装したい方はこちらからジャンプ ↓↓

1.flexbox + float

図のような形に、なるといいなと思ったんですが、
画像にfloatをつけないと画像の上に余白ができてしまい、
画像にfloatを付与することでflex-endがリセットされる形になってしまったため、不可。

2.table・grid・column

上の例はtableの場合ですが、グリッドレイアウトにしても、カラムレイアウトにしても、
行と列を組み合わせた、赤い実線のような複雑な結合の仕方はできないんですね。

行か列のみ結合しすると今度は、テキストがセルごとに仕切られてしまい動的に流れ込ませることができないため、不可。

3.background・position + 擬似要素

画像はbackgroundもしくは、position: absolute;で配置し、
擬似要素でスペースをつくったらうまいこといかないかな、と考えました。

こんな感じで理想を描いてたんですが、
うまくいかず、不可。

結果、やはりfloat一択だな、という結論に。
では。いよいよ実装してまいります。

実装

HTML

<div class="float_box">
 <div class="space"></div>
 <div class="img"><img src="pet_fat_cat.png" alt="" width="225"></div>
 <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>
</div>

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>

</div>

テキストと画像の上に、.spaceという空divを配置します。

テキストは夏目漱石「吾輩は猫である」から引用しています。
画像はいらすとやさんの太った猫のイラストをお借りしました。

CSS

.float_box{ overflow: hidden;}
.img{
    clear: both;
    float: right;
}
.space{
    width: 1px;
    height: 100%;
    background: #f00;
}

.float_box{ overflow: hidden;}

.img{

clear: both;

float: right;

}

.space{

width: 1px;

height: 100%;

background: #f00;

}

通常どおり回り込むよう、画像にfloat: right;を指定しておきます。
あとで.spaceにもfloatを付与するので、
画像にはclear: both;も付与しておきます。

親要素.float_boxには、floatにより高さが無視されてしまうのを防ぐためoverflow: hidden;を付与しておきます。

.spaceは、デザインの邪魔をしない程度の幅を指定しておきます。
今回はサンプル用に1pxで目立つ色をつけていますが、実際に使用する場合は
幅をもっと狭めて（0.5pxくらい？）、色はtransparentで構いません。

jQuery

$(function() {
    function floatHeight(){
        $('.space').css('float','none');//一旦.spaceのfloatを解除してから、
        var height = $('p').outerHeight();//float状態のouterHeightを取得します。
        $('.space').outerHeight( height - 255 ).css('float','right');
    }
    
    $(window).on('load resize',function() {
        floatHeight();
    });
});

$(function() {

function floatHeight(){

$('.space').css('float','none');//一旦.spaceのfloatを解除してから、

var height = $('p').outerHeight();//float状態のouterHeightを取得します。

$('.space').outerHeight( height - 255 ).css('float','right');

}

$(window).on('load resize',function() {

floatHeight();

});

jQueryは、.spaceに動的に高さを与えて、画像の上でfloatさせるために使います。

今回は、floatHeightという関数を用意しました。
内容としては
まず、一旦.spaceのfloatを解除してから（3行目）、
float状態の時のテキストの高さ（outerHeight）を取得します（4行目）。
取得したテキストの高さから画像の高さ（今回は255px）を差し引いて、
.spaceに、取得した高さとfloat: right;を付与します（5行目）。

そして、ページが読み込まれた時とリサイズされた時に
floatHeightを呼び出します（8〜10行目）。

プレビュー

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

幅の狭い.spaceに「テキストの高さー画像の高さ」を付与していることで
.spaceの下で.imgにもテキストが回り込み、結果下揃えしているように見える
のがお分かりいただけると思います。

画面の幅を変えても下で揃いますので、試してみてください。

まとめ

画像下揃えでテキストを回り込ませる方法を紹介しました。
今回、画像の大きさは固定で話を進めましたが、
可変バージョンも追記できるといいな。

また今回、画像は右下に配置しましたが
画像を左下にする場合は、CSSとjQueryのfloat: right;になっているところを
float: left;に変えて試してみてください。

実装にあたり、下記のページを参考にさせていただきました。ありがとうございます！
右下または左下においた画像に文字列を回り込ませるHTML/CSS
CSSで左下・右下にある画像を回り込ませたい！｜ Tips Note by TAM