WEB作成メモBLOG

floatした画像の下にテキストを回り込ませないCSS

HTML・CSS | 2012.05.10

ちょっとした画像を右端に置きたい時など、imgタグにclass指定して、float:left;またはfloat:right;で左寄せ(右寄せ)する事はよくあります。
この場合、画像に続くテキストはその長さによって画像の下に回り込み事になります。

回り込ませたくない場合は、画像とテキストをdivでくくってfloatさせ、サイズに応じて横幅指定をしなければならない(めんどくさい)・・・と思っていたのですが、
簡単に回り込みさせない方法がありました。
書き方は以下の通りです。

【HTMLファイル】
<div class=”area”>
<img src=”photo.jpg” alt=”” />
<div>テキストテキストテキスト</div>
</div>

【CSS】
.img_left{float:left;}
.area div{overflow:hidden;}

floatを使うのはレイアウトの基本ですが、がちがちにサイズ指定するだけでなく、この様なスタイルの指定の仕方は、様々なブラウザへの対応がスマートな感じがして好きです。

【PR】使わなくなったパソコンはありませんか?パソコン無料回収

関連する記事

カラーミーショップはリアルな店舗を持っていなくても、ネットを通じて商品を販売する楽しみを多くの人に実感してもらえるショッピングカートです。これまでに23万を超えるユーザー様からお申込みをいただいております。
カラーミーショップなら誰かに(大手に)頼らなくても、あなた好みのネットショップを作れます。あなたがセレクトした商品や作った商品の魅力を伝え、それを欲しいと思ってくれる人にお届けしてみませんか。
30日間、無料でお試しいただけるので、初心者の方やネットショップ作成サービスで悩んでいる方も、安心してご利用いただけます。
ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額100円(税抜)~ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ!レンタルサーバーはこちら
▼インストール不要の画像作成ツール▼
画像作成ツールボタンメーカープロ

カテゴリー

アーカイブ


リンク

アフラット
ページのトップへ戻る