<div valign=bottom> は効かないのでしょうか？

テキストを二つのまとまりに上下に分けたいのですが、その際ひとつを左上に詰めて、もうひとつを左下につめるようにしたいのですが、table タグを使用せずにそういうことは可能でしょうか？

下に下げたい方を<div valign=bottom> でくくってみましたが有効でないようなので、どうしたものかと思っています。

方法をご存知の方おられましたらどうぞよろしくお願いいたします。

No.6 ベストアンサー 回答者： Spider-net 回答日時： 2006/12/04 20:39

意図がよく分からないため、ひどくピーキーなやり方ですが以下の方法なら確実です。

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/05 01:07

No.8 回答者： vista2446 回答日時： 2006/12/04 20:49

ANo.1です。

#7で閉じタグを忘れました。
<div style="float: left;">
<div>テキスト（上部）</div>
<div style="position: absolute; bottom: 0px;">テキスト（下部）</div>
</div>
すみませんでした。

この回答へのお礼

たびたびありがとうございます。
教えてくださったやり方ですと、ページが縦に長くてスクロールバーが出る場合、文字がダブってしまいました。

しかし、＃６のご回答者さんのやり方でなんとかできました。

お礼日時：2006/12/05 01:07

No.7 回答者： vista2446 回答日時： 2006/12/04 20:46

あら、たくさん回答を頂いてますね。

もう必要ないかも。。。ANo.1です。

ブラウザの左上と左下にテキストを、常に表示したかったのですね。単にテキストを表示させるだけなら、
<div style="float: left;">
<div>テキスト（上部）</div>
<div style="position: absolute; bottom: 0px;">テキスト（下部）</div>

No.5 回答者： crepon133 回答日時： 2006/12/04 20:27

具体的なレイアウトが分からないので何とも・・・

<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/05 01:07

No.4 回答者： PED02744 回答日時： 2006/12/04 19:35

やりたいことはわかったんですが、なんでテーブルを使ってはいけないんですか？(^_^;)

スタイルシートを使っても、テーブルを使って整形するのは結構あることだとおもうんですが。

テーブルを組まないでこれをしようとおもったら、元が高さが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>

この回答へのお礼

テーブルタグをできるだけ除いて表示速度の速いページを作りたいと思っています。

height についてですが、400px ではなく100% の場合はどのようにするのでしょうか？

お礼日時：2006/12/04 20:15

No.3 回答者： PED02744 回答日時： 2006/12/04 16:42

テーブルを使わずに・・・と書かれているという事は、

「テーブルを使った書き方はわかっている」ということですね？

でしたら、そのテーブルを使った書き方を示していただけませんでしょうか？
言葉だけだと、ちょっと何がしたいのかわかりかねます。
ちなみに、"valign"はテーブル用の属性です。
http://www.hajimeteno.ne.jp/html40/v/valign.html

「左上」「左下」ということだけを考えたら、単に二行上下に並べて書くだけでいいようなきがするのですが、きっと違う事がしたいんだとおもいますので。。。

この回答へのお礼

＃１の補足に詳細を付け足しましたので、もしやり方をご存知のようでしたらよろしくお願いいたします。

お礼日時：2006/12/04 18:36

No.2 回答者： crepon133 回答日時： 2006/12/04 15:55

こんな感じでしょうか？

<div style="width:240px;">
あああああ<br>あああああ
</div>
<div style="width:240px;margin-left:240px;">
いいいいい<br>いいいいいいい
</div>

この回答へのお礼

テキストをブラウザのウィンドウの高さが変化しても、左上に沿うグループと、左下に沿うグループに分けたいのですが可能でしょうか？

お礼日時：2006/12/04 18:35

No.1 回答者： vista2446 回答日時： 2006/12/04 01:56

テキストをどんな感じで表示させたいのか、イマイチよくわからないのですが…

divを使えば改行されるので、無効なvalignを使うまでもなく下に表示されます。ただ、2つのテキストの区切りを付けたいのであれば、ｐ要素で段落にすれば良いんじゃないかな～。（<div><p>テキスト1</p><p>テキスト2</p></div>pタグの前で空白行が入ります）
preを使えば、htmlのソース上で整形すればブラウザにそのまま反映されます。（改行、空白など）
divというブロック要素を使って横幅を指定し、テキストを自動改行させたいのであれば、スタイル属性を記述しなければなりません。（例・200pxでテキストを折り返す<div style="width: 200px;">）

いろんな推測が浮かんできて、的を射てないとおもいますが、ご参考になれば、、、

この回答へのお礼

こちらの説明不足にかかわらず丁寧に回答していただきありがとうございます。

実現させたいこととしまして、以下のようなテーブルで二つのパートを上下にそれぞれつめて分けるやり方を table タグを使用せずに行いたいのですが可能でしょうか？

<table height="400">
<tbody>
<tr valign="top">
<td>
テキスト（上部）
</td>
</tr>
<tr valign="bottom">
<td>
テキスト（下部）
</td>
</tr>
</tbody>
</table>

お礼日時：2006/12/04 18:33