左に画像・右に文字列のレイアウトを実現する方法を書いてみます。PCで見ないと表示が崩れる実現方法ばかりです（笑）
レスポンシブデザインでスマホも適応させるならメディアクエリで表示を分けましょう。
単純に画像を左側、文字を右側に回り込ませるなら
画像に対して、floatをかけただけ。この方法だと画像が左、文字が右側に配置されます。文字が画像の高さより高くなった時、画像の下に文字が入り込みます。画像にfloat:left;がかかっているので、このあとも画像を配置するたびに文字が右に回り込みます。
文字の回りこみを解除したい場合は、<div style="clear:left;"></div>などでfloatを終わらせる必要があります。
See the Pen EGBod by akiueo (@akiueo) on CodePen.
文字の高さが画像を超えても、文字列が崩れないように絶対値で指定
上の方法は雑誌のようなレイアウトならありですが、画像だけを左に配置して文字列を右側にしたい場合不都合が生じます。
ちょっとトリッキーなやり方ですが、画像を絶対配置で指定し、画像の分文字を右側に押しやっています。 これなら、あとに続く要素の配置には影響しませんが、スマホなどでは表示が崩れます。
See the Pen tozmG by akiueo (@akiueo) on CodePen.
displayプロパティで回りこませる
floatも位置指定もせずに回りこみを実現する方法。この方法だと、幅が足りなくなった時に文字が画像の下に落ちます。
See the Pen vKDLC by akiueo (@akiueo) on CodePen.
displayプロパティとは？というときはこちら
ボックスの中で幅を可変に、パーセントで幅を指定
下記の方法を取れば、ウィンドウの横幅が変わってもboxの中で画像の大きさと文字の範囲が可変します。実際にウィンドウの横幅をせばめたりするとどういった動きか分かると思います。これが一番現実的かな？
