【CSS】一行でテキストを左右に分けるときのCSS

css

よくタイトルバーなどで左側にタイトルで右側に日付なり「続きはこちら」のようにテキストが左右に分けてある場合がある。まぁ場合にもよるのだろうけど。一応メモ。

text-alignで振り分ける

まずはそれぞれ寄せたいテキストを「text-align」のプロパティを使って振り分ける。下記は使用するhtml。


    
ここはタイトル

    
つづきはこちら

上記のようにhtmlがあった場合にh2タグの「ここはタイトル」を左に寄せて、pタグの「つづきはこちら」を右寄せにしたい。

text-alignをそれぞれ左右に分けると分かると思うが、pタグの方は右寄せになるものの一列にh2タグと同じ高さには成らず、段落ちしているようになる。
それを高さの位置を揃えて一行に見せるためにh2タグの方には「float:left」を指定する。するとpタグが周りこみh2の高さと同じ位置になる。


h2{
    text-align:left;
    float:left;　// pタグを周り込ませるための指定。
    font-size:16px;
    padding:0;
    margin:0;
}

div.title p{
    font-size:16px;
    text-align:right;
    padding:0;
    margin:0;
}