こんにちは、
今日は、サイドメニューの横の本文のレイアウトについてです。
テキストと画像が並ぶと言うよく見かけるレイアウトです。以前、テキストと画像の上部の位置が揃えるのに戸惑ったことがありましたので、復習してみました。
結論は、Pタグを使用し、"float"プロパティにて設定するやり方に落ち着きました。
"img"に"align"プロパティを使用する方法など、昔は使っていたのではないかと思いますが。
要領は、直親Divの下に
<p>テキスト</p>
これをfloatプロパティで"left"に指定、widthの指定ももちろんです。
そして、
<p><img ------- /></p>
これをfloat プロパティで"right"に指定します。
次に出てくるDivタグに、回り込み解除のために、"Clear"プロパティ"both"を指定したら完了です。
テーブルとあまり遜色なくかちっとしたレイアウトになったかと思っています。
このレイアウトもテーブルでレイアウトするのなら、何も考えなくてもできるですが、それを言っちゃおしまいですかね。
それでは。