テーブルの1つのセル内で、上揃えの文章と下揃えの文章を書きたい。

質問

いつもお世話になっています。

テーブルの1つのセル内で、スタイルシートを利用して、左上揃えの文章と右下揃えの文章を書きたいと思っています。

┌──────────────────
│本文・・・・・
│
│
│　　　　　　　　　　　　　　＞リンク
└──────────────────

わかりにくいかもしれませんが、上記のような感じです。

セルを分割すればすごく簡単なのですが、ぜひスタイルシートで実現したいと思っています。（できればテーブルも使わずにdivやspanでできるといいのですが・・・）

方法がありましたら教えて頂けると助かります。

回答No.5

steel_gray

左のセルの内容にあわせて、margin-topの値を決める。これが無理なら、
各種ブラウザで同じようにする方法はみつかりませんでした。

以下、一応ブラウザ別にできたもの。（Operaではみつからず。）

** WinIE6 **
<td style="position:relative;vertical-align:top">
本文・・・・・
<div style="position:absolute;right:0;bottom:0;">
＞リンク
</div>
</td>

** Gecko(Firefox/Mozilla/Netscape7.1) **
<td style="vertical-align:top">
<div style="position:relative;height:100%;">
本文・・・・・
<div style="position:absolute;right:0;bottom:0;">
＞リンク
</div>
</div>
</td>

** テーブルを使わず（これならOperaもOK) **

<div>
<div style="float:left;position:relative;">
<div style="float:left;">
1<br>2<br>3<br>4<br>5<br>6<br>
</div>
<div style="float:left;">本文・・・・</div>
<div style="position:absolute;right:0;bottom:0;">
＞リンク
</div>
</div>
<br style="clear:both;"></div>

回答No.4

partita

＃２です。
隣接セルがあるのですか。読み落としていました。
セルの分割が早いとは思うのですが、それが不採用となれば…。

捕捉要求です。
右セルは「本文」「リンク」となっていますが、左セルはどんな内容ですか？

回答No.3

quads

今朝から考えていたのですが無理でした。
一般性を考えて隣接セルやそのセルの高さに関わらず上揃え、下揃えが出来るような指定を試みましたが、td要素内の内容物の扱いが特殊なため、普通に考えられるような指定では対応できませんでした。

position
height
vertical-align

過去モード、準拠モード問わず、モダンブラウザで再現できませんでした。
IEのバグ解釈により、IEのみであるなら再現可能ですが、CSSで構成する意味が無くなってしまいます。

どうしてもというなら、そのセルの高さを弄る必要があります。
しかしながら、セル内でそのような配置は難しいです。

回答No.2

partita

＞上記では解決しませんでした。わたしがやりたいことは、常に一番右下に配置したいのです。

解決すると思いますが。

回答No.1

steel_gray

右寄せし、本文との間を１行空けるスタイル。

<td>本文・・・・・
<div style="text-align:right;margin-top:1em;">
＞リンク
</div></td>

スタイルについてどんなプロパティがあってどんな意味があるかは参考URLあたりを読んでみてください。

参考URL：

http://www.htmq.com/style/

補足

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

上記では解決しませんでした。わたしがやりたいことは、常に一番右下に配置したいのです。

<table>
<tr valign="top">
<td>1<br>2<br>3<br>4<br>5<br>6<br></td>
<td>本文・・・・・<br>
＞リンク
</td>
</tr>
</table>

このように、左のセルの行数によって右のセルの高さも変わるので、どんな行数になっても常に右下に「＞リンク」が配置されるようにしたいのです。