タグ

2016年10月25日のブックマーク (1件)

  • CSSで左に画像・右に文字列を配置するレイアウト - Webのあいラボ

    左に画像・右に文字列のレイアウトを実現する方法を書いてみます。PCで見ないと表示が崩れる実現方法ばかりです(笑) レスポンシブデザインでスマホも適応させるならメディアクエリで表示を分けましょう。 単純に画像を左側、文字を右側に回り込ませるなら 画像に対して、floatをかけただけ。この方法だと画像が左、文字が右側に配置されます。文字が画像の高さより高くなった時、画像の下に文字が入り込みます。画像にfloat:left;がかかっているので、このあとも画像を配置するたびに文字が右に回り込みます。 文字の回りこみを解除したい場合は、<div style="clear:left;"></div>などでfloatを終わらせる必要があります。 See the Pen EGBod by akiueo (@akiueo) on CodePen. 文字の高さが画像を超えても、文字列が崩れないように絶対値で指

    CSSで左に画像・右に文字列を配置するレイアウト - Webのあいラボ
    edward
    edward 2016/10/25