テキストを二つのまとまりに上下に分けたいのですが、その際ひとつを左上に詰めて、もうひとつを左下につめるようにしたいのですが、table タグを使用せずにそういうことは可能でしょうか？
下に下げたい方を<div valign=bottom> でくくってみましたが有効でないようなので、どうしたものかと思っています。
方法をご存知の方おられましたらどうぞよろしくお願いいたします。
投稿日時 - 2006-12-04 00:54:21
意図がよく分からないため、ひどくピーキーなやり方ですが以下の方法なら確実です。
boxセレクタのheightをいくつにしても、btmクラスを指定されたpタグはboxセレクタ内の最下部に回ります。
<style>
#box{
position:relative;
height:400px;
}
p.btm{
position:absolute;
bottom:0px;
left:0px;
}
</style>
<div id="box">
<p>
ああああ
</p>
<p class="btm">
ああああ
</p>
</div>
なお補足意見ですが、ブロードバンドが普及している現在、タグレベルの軽量化（数KB～数10KB）による体感速度の違いは、ほとんど得られないかと思われます。画像一枚置くだけでページサイズは数十倍になってしまいますし。
投稿日時 - 2006-12-04 20:39:18
お礼
ありがとうございます。このやり方でできました。感謝いたします。
投稿日時 - 2006-12-05 01:07:16
1人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（7件中 1～5件目)
ANo.1です。#7で閉じタグを忘れました。
<div style="float: left;">
<div>テキスト（上部）</div>
<div style="position: absolute; bottom: 0px;">テキスト（下部）</div>
</div>
すみませんでした。
投稿日時 - 2006-12-04 20:49:01
お礼
たびたびありがとうございます。
教えてくださったやり方ですと、ページが縦に長くてスクロールバーが出る場合、文字がダブってしまいました。
しかし、＃６のご回答者さんのやり方でなんとかできました。
投稿日時 - 2006-12-05 01:07:10
具体的なレイアウトが分からないので何とも・・・
<div style="width:240px;position:absolute;top:0%;left:0%;border:1px solid #666666;">あああああ<br>あああああ</div>
<div style="width:240px;position:absolute;right:0%;bottom:0%;border:1px solid #666666;">いいいいい<br>いいいいいいい</div>
投稿日時 - 2006-12-04 20:27:34
お礼
教えてくださったやり方ですと、縦に長いページで文字が重なってしまいました。しかし、＃６の回答者さんの方法で解決いたしました。ありがとうございます。
投稿日時 - 2006-12-05 01:07:19
やりたいことはわかったんですが、なんでテーブルを使ってはいけないんですか？(^_^;)
スタイルシートを使っても、テーブルを使って整形するのは結構あることだとおもうんですが。
テーブルを組まないでこれをしようとおもったら、元が高さが400pxのテーブルだったとしたら、1x200pxの100%透過GIFの画像を貼り付けてそれにそって、alignを作るというのでできないかなあ。。とおもいますが、未確認です。
<div style="height:400px;">
<img src="200px.gif" alt="200pxgif" style="vertical-align:text-top;" />あああああああああああ<br>
<img src="200px.gif" alt="200pxgif" style="vertical-align:text-buttom;" />いいいいいいいいいいい<br>
</div>
投稿日時 - 2006-12-04 19:35:59
お礼
テーブルタグをできるだけ除いて表示速度の速いページを作りたいと思っています。
height についてですが、400px ではなく100% の場合はどのようにするのでしょうか？
投稿日時 - 2006-12-04 20:15:02
テーブルを使わずに・・・と書かれているという事は、
「テーブルを使った書き方はわかっている」ということですね？
でしたら、そのテーブルを使った書き方を示していただけませんでしょうか？
言葉だけだと、ちょっと何がしたいのかわかりかねます。
ちなみに、"valign"はテーブル用の属性です。
http://www.hajimeteno.ne.jp/html40/v/valign.html
「左上」「左下」ということだけを考えたら、単に二行上下に並べて書くだけでいいようなきがするのですが、きっと違う事がしたいんだとおもいますので。。。
投稿日時 - 2006-12-04 16:42:31
お礼
＃１の補足に詳細を付け足しましたので、もしやり方をご存知のようでしたらよろしくお願いいたします。
投稿日時 - 2006-12-04 18:36:47
