home wiki.fukuchiharuki.me
Menu

キーワード

  • 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)がなぜかはみ出さないになるのはなんで??

参考