エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
floatさせた画像をボックスの左下・右下角に配置して、回り込んだテキストと画像を下揃えしたい - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
floatさせた画像をボックスの左下・右下角に配置して、回り込んだテキストと画像を下揃えしたい - Qiita
画像をボックスの左下や右下角に配置したレイアウトで、回り込んだテキストと画像を下揃えして表示した... 画像をボックスの左下や右下角に配置したレイアウトで、回り込んだテキストと画像を下揃えして表示したい。レスポンシブで! その実現方法のメモです。 ※素材画像: Photo by Chris Lawton on Unsplash 画像をfloatにして、テキストと下揃えする位置まで動かせば実現できそうです。 課題は、下揃えになる位置をどのようにして取得するか?です。ブラウザで表示してテキストの折り返しの状態を見ながら画像の位置を手作業で調整することによって画像とテキストを下揃えにする位置を見つけることはできますが、これではレスポンシブに対応できません。 そこで、JavaScriptのIntersection Observer APIを使って、下揃えの調整を自動的に行う方法を考えました。 完成したコードはこちら: https://codepen.io/kaz_hashimoto/pen/xxPw