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

css

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

text-alignで振り分ける

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

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

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