画像の下にテキストが回りこまないレイアウト | ヨモツネット

概要 画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。 さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。 また、画像がない場合でも画像分が詰められて表示されます。 これを応用すれば柔軟に対応できるコンポーネントをつくることができます。 動作確認用の demo 動作確認用の demo (左右逆版) 説明 display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えて

[aquila2005]

画像をfloatさせつつ、テキストを回り込ませない方法

[t32k]

テーブルレイアウトしかできないかと思ってた＞＜ - Tags: #CSS

[hibiki443]

画像サイズが固定ではない場合

[XIAORING]

img 段落の左や右に画像を配置するとき回り込みをしない

[hiro_y]

画像と文章を並べる場合に回り込まないように。table系のdisplayを利用、IE向けにはhasLayoutをうまく使う。

[hashimoya]

ずっとtable使ってた…！displayにtable-cellの発想はなかったわ。