-PR-
解決済み

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

  • 暇なときにでも
  • 質問No.2578978
  • 閲覧数2429
  • ありがとう数9
  • 気になる数0
  • 回答数8
  • コメント数0

お礼率 83% (553/665)

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

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

方法をご存知の方おられましたらどうぞよろしくお願いいたします。
通報する
  • 回答数8
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.6
レベル5

ベストアンサー率 100% (3/3)

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

お礼率 83% (553/665)

ありがとうございます。このやり方でできました。感謝いたします。
投稿日時 - 2006-12-05 01:07:16

その他の回答 (全7件)

  • 回答No.2
レベル12

ベストアンサー率 51% (399/776)

こんな感じでしょうか?
<div style="width:240px;">
あああああ<br>あああああ
</div>
<div style="width:240px;margin-left:240px;">
いいいいい<br>いいいいいいい
</div>
お礼コメント
jyuu

お礼率 83% (553/665)

テキストをブラウザのウィンドウの高さが変化しても、左上に沿うグループと、左下に沿うグループに分けたいのですが可能でしょうか?
投稿日時 - 2006-12-04 18:35:04


  • 回答No.3
レベル11

ベストアンサー率 40% (157/390)

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

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

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

お礼率 83% (553/665)

#1の補足に詳細を付け足しましたので、もしやり方をご存知のようでしたらよろしくお願いいたします。
投稿日時 - 2006-12-04 18:36:47
  • 回答No.4
レベル11

ベストアンサー率 40% (157/390)

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

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

お礼率 83% (553/665)

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

height についてですが、400px ではなく100% の場合はどのようにするのでしょうか?
投稿日時 - 2006-12-04 20:15:02
  • 回答No.1
レベル11

ベストアンサー率 46% (131/279)

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

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

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

お礼率 83% (553/665)

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

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

<table height="400">
<tbody>
<tr valign="top">
<td>
テキスト(上部)
</td>
</tr>
<tr valign="bottom">
<td>
テキスト(下部)
</td>
</tr>
</tbody>
</table>
投稿日時 - 2006-12-04 18:33:02
  • 回答No.5
レベル12

ベストアンサー率 51% (399/776)

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

<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>
お礼コメント
jyuu

お礼率 83% (553/665)

教えてくださったやり方ですと、縦に長いページで文字が重なってしまいました。しかし、#6の回答者さんの方法で解決いたしました。ありがとうございます。
投稿日時 - 2006-12-05 01:07:19
  • 回答No.7
レベル11

ベストアンサー率 46% (131/279)

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

ブラウザの左上と左下にテキストを、常に表示したかったのですね。単にテキストを表示させるだけなら、
<div style="float: left;">
<div>テキスト(上部)</div>
<div style="position: absolute; bottom: 0px;">テキスト(下部)</div>
  • 回答No.8
レベル11

ベストアンサー率 46% (131/279)

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

お礼率 83% (553/665)

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

しかし、#6のご回答者さんのやり方でなんとかできました。
投稿日時 - 2006-12-05 01:07:10
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-

特集


抽選で合計100名様にプレゼント!

ピックアップ

ページ先頭へ