一行の中で左寄せと右寄せに分けて表示する方法

ＷＥＢ上で文字を左寄せの文字と右寄せの文字を同一の行の中で表示されてるのを見かけることがありますよね・・・

今日は、そのテクニックをご紹介してみようと思います。


先ず、文字を左と右に表示するには・・・

1. “★テキストを左に”の文字を左側に表示するには・・・style="text-align:left"と記述します。
   
   
2. “2011年8月15日”を右側に表示するには・・・style="text-align:right"と記述します。
   
   
3. これをまとめて記述すると・・・
   <DIV style="background:lime;color:black;font-weight:bold;width:400px;text-align:left;">
   <DIV style="text-align:right;">2011年8月15日</DIV>★テキストを左に</DIV>
   
   
4. すると下の様な表示になる訳です・・・
   2011年8月15日

   ★テキストを左に
   
   
5. しかし、御覧のように上下に行に分かれていますよね
   
   
6. では、どうすれば一行の中で左右に配置できるのか・・・
   
   
7. 日付のスタイルシートに・・・float:rightを追加記述します
   
   
8. これをまとめてみますと以下の様に成ります・・・
   <DIV style="background:lime;color:black;font-weight:bold;width:400px;text-align:left;">
   <DIV style="text-align:right;float:right;">2011年8月15日</DIV>★テキストを左に</DIV>
   
   
9. 結果、下の様に一行の中で左側に表示される文字と右側に表示される文字とのように見える訳です。
   2011年8月15日

   ★テキストを左に

※　このfloatプロパティはrightとleftを指定出来ます。
　理屈は、8月9日に紹介した画像を右上に移動させる方法の応用です。



今日の小技は如何でしたか？