floatとtext alignについて、まとめてみた。
1)なにもしないばあい。イラストの下に文字のブロックがレイアウトされる。
<p><img src=”Ohuro.png” /></p>
<p>わーい。ぽかぽかだお。きょうはね、かけっこしたんだよ。それから、ジャングルジムでも、あそんだよ。せんせいは、ごきげんだったよ。きょうのおかず、なにかなぁ。ハンバーグだと、いいなぁ。</p>
2)floatをつかったばあい。プロパティ値はrightとしている。文字ブロックの右側にフローしているかんじ。
<p style=”float: right”><imgsrc=”Ohuro.png”/></p>
<p>わーい。ぽかぽかだお。きょうはね、かけっこしたんだよ。それから、ジャングルジムでも、あそんだよ。せんせいは、ごきげんだったよ。きょうのおかず、なにかなぁ。ハンバーグだと、いいなぁ。</p>
3)text-alignをつかったばあい。プロバティ値は、おなじくrightに。イラストは右側に移動する。ただし、文字ブロックは下側にレイアウトされている。
<p style=”text-align: right”><imgsrc=”Ohuro.png”/></p><p>わーい。ぽかぽかだお。きょうはね、かけっこしたんだよ。それから、ジャングルジムでも、あそんだよ。せんせいは、ごきげんだったよ。きょうのおかず、なにかなぁ。ハンバーグだと、いいなぁ。</p>