ELLの足跡

人は最後は一人だと言う・・・でも、今は妻が傍にいる・・・

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

2011-08-15 | 日々のパソコン
WEB上で文字を左寄せの文字と右寄せの文字を同一の行の中で表示されてるのを見かけることがありますよね・・・

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


先ず、文字を左と右に表示するには・・・
  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プロパティはrightleftを指定出来ます。
 理屈は、8月9日に紹介した画像を右上に移動させる方法の応用です。



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



宜しければクリックしてみて下さい
素晴らしい すごい とても良い 良い
ジャンル:
ビジネス実用
コメント   この記事についてブログを書く
« 今年も、お盆恒例の絨毯洗い... | トップ | 関西電力 17・18日が厳しい!... »
最近の画像もっと見る

コメントを投稿

日々のパソコン」カテゴリの最新記事