キーワード

• CSS
  • float
  • overflow

概要

幅指定なしに float で画像を横に置くときのtip。

方法

<div>
  <div style="float: left;">
    <img src="(画像ファイル)">
  </div>
  <div style="overflow: hidden;">
    テキストテキストテキスト
  </div>
</div>

解説

• 画像側のdivは「float: left;」を指定する
• テキスト側のdivは「overflow: hidden;」を指定する

こうすると、

• 画像側は float によってコンテンツ依存の幅になる
• テキスト側は overflow によって残りの幅になる

はみ出した部分を表示しない、の指定(overflow)がなぜかはみ出さないになるのはなんで？？

参考

• http://www.acky.info/tips/css/00028.html