※本ページはプロモーションが含まれています 作成:2015/01/08 画像にfloatを指定してテキストを回り込ませると、自動で画像の周りに回りこみとても便利なのですが、画像の下には回りこませたくない時があります。 tableタグやcss3でtable-cellを使う方法もありますが、tableは使いたくないし、table-cellはmarginが効かなかったり使い勝手が良くなかったので、floatで行う方法を紹介します。 画像の横に配置したいテキストをPタグなどで囲み、囲ったタグに「overflow:hidden;」を設定する。 HTML <div class="box"> <img src="img.jpg" /> <p> テキストテキストテキストテキストテキストテキストテキスト </p> </div> CSS .box img { float:left; } .box p{ ove
![floatした画像にテキストが回り込まないようにする方法 | 経験知](https://cdn-ak-scissors.b.st-hatena.com/image/square/c387cfc88b000721bd3d1d33006ee3eb81789616/height=288;version=1;width=512/https%3A%2F%2Fkeikenchi.com%2Fwp-content%2Fuploads%2F2015%2F01%2F20150108-170351.jpg)