いつもお世話になっています。
テーブルの1つのセル内で、スタイルシートを利用して、左上揃えの文章と右下揃えの文章を書きたいと思っています。
┌──────────────────
│本文・・・・・
│
│
│ >リンク
└──────────────────
わかりにくいかもしれませんが、上記のような感じです。
セルを分割すればすごく簡単なのですが、ぜひスタイルシートで実現したいと思っています。(できればテーブルも使わずにdivやspanでできるといいのですが・・・)
方法がありましたら教えて頂けると助かります。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
左のセルの内容にあわせて、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
- 回答日時:
#2です。
隣接セルがあるのですか。読み落としていました。
セルの分割が早いとは思うのですが、それが不採用となれば…。
捕捉要求です。
右セルは「本文」「リンク」となっていますが、左セルはどんな内容ですか?
No.3
- 回答日時:
今朝から考えていたのですが無理でした。
一般性を考えて隣接セルやそのセルの高さに関わらず上揃え、下揃えが出来るような指定を試みましたが、td要素内の内容物の扱いが特殊なため、普通に考えられるような指定では対応できませんでした。
position
height
vertical-align
過去モード、準拠モード問わず、モダンブラウザで再現できませんでした。
IEのバグ解釈により、IEのみであるなら再現可能ですが、CSSで構成する意味が無くなってしまいます。
どうしてもというなら、そのセルの高さを弄る必要があります。
しかしながら、セル内でそのような配置は難しいです。
No.1
- 回答日時:
右寄せし、本文との間を1行空けるスタイル。
<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>
このように、左のセルの行数によって右のセルの高さも変わるので、どんな行数になっても常に右下に「>リンク」が配置されるようにしたいのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excelで、Excelの小テストで、中央揃えとかありますが、右クリックで、セルの書式設定から中央ぞ 3 2022/12/29 12:43
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- Excel(エクセル) エクセル 表示方法 4 2022/09/28 12:30
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- Visual Basic(VBA) EXCEL VBA 単語置き換え について質問です ブック名 ぶぶぶ シート名 ししし セル V3〜 3 2023/03/08 01:41
- HTML・CSS アドバイスを下さい。 1 2022/10/08 01:18
- Google Drive googleスプレッドシートで文章がセルにきれいに収まらなくて困っています 2 2022/07/31 16:00
- その他(データベース) pythonでsqlight勉強中、クエリー結果の利用法教えて下さい 1 2022/04/28 20:38
- Excel(エクセル) capeofdragonと申します Excel2016を使っておりまして 半角又は全角の任意文字列が 2 2022/10/31 13:51
- Visual Basic(VBA) 列を指定して値を左から5文字にそろえる 1 2022/06/10 20:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html スクロール要素を下から表...
-
★★★フッター最下部固定/スクロ...
-
CSSでdivのheightを動的に
-
チェックボックスの背景色って...
-
フッター上部に謎の隙間
-
textareaで入力した文字を改行...
-
TABLEの高さを固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
スクロール可能なチェックボックス
-
離れた場所にマウスオーバーで...
-
3点リーダーの作り方
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
Gifアニメ、最後のコマに行った...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
複数のバナーをリロードする度...
-
デフォルト非表示にしたい。【t...
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報