タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

画像とtipsに関するhashimoyaのブックマーク (1)

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

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

    hashimoya
    hashimoya 2008/08/17
    ずっとtable使ってた…!displayにtable-cellの発想はなかったわ。
  • 1