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

質問

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

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

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

回答No.6

Spider-net · ベストアンサー

意図がよく分からないため、ひどくピーキーなやり方ですが以下の方法なら確実です。
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）による体感速度の違いは、ほとんど得られないかと思われます。画像一枚置くだけでページサイズは数十倍になってしまいますし。

お礼

ありがとうございます。このやり方でできました。感謝いたします。

回答No.8

vista2446

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

お礼

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

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

回答No.7

vista2446

あら、たくさん回答を頂いてますね。もう必要ないかも。。。ANo.1です。

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

回答No.5

crepon133

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

<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>

お礼

教えてくださったやり方ですと、縦に長いページで文字が重なってしまいました。しかし、＃６の回答者さんの方法で解決いたしました。ありがとうございます。

回答No.4

PED02744

やりたいことはわかったんですが、なんでテーブルを使ってはいけないんですか？(^_^;)
スタイルシートを使っても、テーブルを使って整形するのは結構あることだとおもうんですが。

テーブルを組まないでこれをしようとおもったら、元が高さが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% の場合はどのようにするのでしょうか？

回答No.3

PED02744

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

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

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

お礼

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

回答No.2

crepon133

こんな感じでしょうか？
<div style="width:240px;">
あああああ<br>あああああ
</div>
<div style="width:240px;margin-left:240px;">
いいいいい<br>いいいいいいい
</div>

お礼

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

回答No.1

vista2446

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

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>