CSSで同一行で左右揃え

質問

CSSによるレイアウトについてご質問です。

ブロック要素を左揃えまたは右揃えにする事は出来るのですが、
一つの行において、左揃えと右揃えをしたい場合は
どのような方法があるのでしょうか。

例：
[左テキスト　　　　　　　　　　　　　　右テキスト]

回答No.1

noname#10926 · ベストアンサー

たぶんテーブルを使用していると思いますが、
テーブルを使用している場合には
１つのセルを２つに分割するか
または、１つのセル内にさらにテーブルを定義して
２つに分割すれば良いと思います。
後者の場合にはテーブルの幅などによって
体裁が悪くなるので幅や余白を0にすればよいと思います。

（前者）１つのセルを２つに分割（３行１列）
<TABLE border="1" width="300" height="187">
<TBODY>
<TR>
<TD>左テキスト</TD>
<TD style="text-align : right;">右テキスト</TD>
</TR>
<TR>
<TD colspan="2"></TD>
</TR>
<TR>
<TD colspan="2"></TD>
</TR>
</TBODY>
</TABLE>

（後者）１つのセル内にさらにテーブルを定義（３行１列）
<TABLE border="1" width="265" height="166">
<TBODY>
<TR>
<TD>
<TABLE cellpadding="0" cellspacing="0" width="100%">
<TBODY>
<TR>
<TD>左テキスト</TD>
<TD style="text-align : right;">右テキスト</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>

お礼

ご回答ありがとうございます。

説明不足で申し訳ありません。
tableを使わずCSSのみでのレイアウトについてのご質問でした。

自分で試したところ、２つのブロック要素をfloat:leftで
1行につなげたうえで、右ブロックにtext-align: rightを指定することで実現できました。