CSSテクニックコミュのBOX内の文字を下にくっつける方法

初めまして、CSSについて質問させていただきます。

<table>
<tr>
<td width="150" valign="top">文字は上部へ</td>
<td width="150" valign="bottom">文字は下部へ</td>
</tr>
</table>

これをCSSで再現することができないでいます。

#wrap{
width:300px;
margin:0;
padding:0;
}
.left{
width:150px;
float:left;
margin:0;
padding:0;
}
.right{
width:150px;
float:right;
margin:0;
padding:0;
}
.clear{
clear:both;
}

<div id="wrap">
<div class="left">文字は上部へ</div>
<div class="right">文字は下部へ…いかない</div>
<div class="clear"></div>
</div>

右側の文字を下にくっつけたいのですが、
どうしたらいいのでしょうか。

コメント(32)

最初
全て
最新の40件

[1] mixiユーザー 04月14日 00:47

.left{
width:150px;
float:left;
margin:0;
padding:0;
vartical-align:top;
}
.right{
width:150px;
float:right;
margin:0;
padding:0;
vartical-align:bottom;
}
でもダメですか？？？

あと、leftとrightの両方に適当なheight値も入れるとか。

[2] mixiユーザー 04月14日 01:00

.rightと.leftの内容に入るテキスト量が、それぞれどんな案配なのかによって提示できる案が変わってきそうな気がします。例えば、.leftの内容にモッサリとテキストがあって、その最終行の右あたりに.rightのテキストをちょこっと添えたいだとか。

[4] mixiユーザー 04月14日 01:32

tableの例ですが、高さを明示しなくとも、片方のセルのテキスト量がもう片方のテキスト量と差があれば、valignを指定する意味は出てきますので、おそらくそういうことではないかと。

例として.rightのテキスト量が、.leftよりも明らかに少ない場合、

.wrap { width: 300px; position: relative; }
.left { width: 150px; }
.right { width: 150px; right: 0; bottom: 0; }

のような感じにすれば、似たような表示は得られると思います。

[5] mixiユーザー 04月14日 01:44

タカコさん、ありがとうございます。

vartical-align:top;
vartical-align:bottom;

この指定ではうまくいきませんでした。

また、テキストが増えれば縦に長くなるように
したいので、height値を指定することは
できないんです。

[6] mixiユーザー 04月14日 01:47

かわち丸さん、ありがとうございます。

leftは、
かなりの文章量があり

rightは、
例えば「詳細はこちら」など
少しの文章なので、

左右で高低差が出る予定です。

[7] mixiユーザー 04月14日 01:49

ハマタロウさん、どうもです。

http://www.brnet.co.jp/BRnet/stylesheet/box002.html
このサイト、とてもためになりました。
やはり無理なんですかね。

[8] mixiユーザー 04月14日 01:58

＞左右で高低差が出る予定

となると、4で示したpositionを用いた方法で、近い表現になるのではないかとおもいます。

[9] mixiユーザー 04月14日 02:11

かわち丸さん、度々ありがとうございます。

#wrap{
width:300px;
margin:0;
padding:0;
position: relative;
}
.left{
width:150px;
float:left;
margin:0;
padding:0;
}
.right{
width:150px;
float:right;
margin:0;
padding:0;
position: relative;
right:0;
bottom:0;
}
.clear{
clear:both;
}

としてみましたが、うまくいきませんでした。

bottom:0;　ここに-100pxなどいれると変化がでる
んですが、絶えず下に張り付いていて欲しいんです。

[10] mixiユーザー 04月14日 02:17

連続で沢山書き込みしてしまってすいません。
分かりやすく理想図を、画像化してみました。

[11] mixiユーザー 04月14日 02:27

＞内田さん
.rightは
position: relative;
じゃなくて
position:absolute;
にするとどうでしょうか？

[12] mixiユーザー 04月14日 02:31

こんな感じになりましたけど。

<div class="wrapper">
<div class="left">テスト</div>
<div class="right">右テスト</div>
</div>

■CSS
.wrapper {
border:1px solid #C00;
overflow: auto;
position: relative;
width: 310px;
}
.wrapper .left {
margin:2px;
border:1px solid #CCC;
float: left;
height: 300px;
width: 150px;
}
.wrapper .right {
margin:2px;
border:1px solid #CCC;
float: left;
width: 150px;
position: absolute;
bottom:0px;
left:150px;
}

[13] mixiユーザー 04月14日 02:32

4 のかわち丸さんの方法ですが、

.right {
position : absolute;
bottom : 0;
}

と、positionプロパティをabsoluteに指定しないと、下辺につかないと思います。
これで試したところ、私の環境では、rightが右下につきました。

#wrap の position プロパティはstatic以外なら何でもいいのですが、無指定だとstaticとみなされるので必ず指定する必要があります。

上で紹介されているサイトの例も、positionプロパティ使えば実現できると思うのですが。

[14] mixiユーザー 04月14日 02:42

さくらぎけいさん、ありがとうございます。

.right {
position : absolute;
bottom : 0;
}
を付け加えてみました。

NN7では理想図のようになったのですが、IEでは
張り付けた画像のようになってしまいました。

[15] mixiユーザー 04月14日 02:49

にゃむ＠スタッフ募集さん、わざわざ画像作成ありがとう
ございます。

同じ条件で作成しましたが、IE/NNともにうまく表示され
ませんでした。MAC/WINともにうまく表示されるようにしたいと
思っています。

[16] mixiユーザー 04月14日 03:17

ie/nnのバージョンは？
win XP/Opera8.54、win/ff1.5.0.1.、
win/ie 6.0.29も
にゃむ＠スタッフ募集さんと同じ表示になりました。
これ以外のブラウザ環境でのテストですか?

[17] mixiユーザー 04月14日 03:43

>タカコさん
こちらはIE6,NN7ともにmacです。
win環境ではまだ見ていません。

[18] mixiユーザー 04月14日 07:02

脇からいきなり机上の空論ですみませんが、

<div class="wrapper">
<div class="left">テスト</div>
<div class="right">右テスト</div>
</div>

div.wrapper {
width : 300px;
position : relative;
}

div.left {
margin-right : 150px;
}

div.right {
width : 150px;
position : absolute;
bottom : 0;
right : 0;
}

ではどうでしょうか

[19] mixiユーザー 04月14日 08:58

Mac IE はボックスに height 指定がないと bottom が変な動きをしますです。

もう少し検証してみますか・・・。

[20] mixiユーザー 04月14日 10:11

ごめんなさい。4の方法、.rightにpositionプロパティ記述し忘れてましたね。

MacIEもとなると、多少強引ですが、

.right {
position: relative;
left: 300px;
top: -20px;
width: 100px;
}

みたくして、それっぽい位置に調整するとか。

[21] mixiユーザー 04月14日 11:52

こういうのはどうでしょう？初心者考えですいません。

#wrap{
width:300px;
margin:0;
padding:0;
}

.left{
width:150px;
margin:0;
padding:0;
}

.right {
margin:-1em 0 0 50%;
}

[22] mixiユーザー 04月17日 20:00

NKJGさん、ありがとうございます。
実験してみましたが、「書き込み14」の
ような図柄になりました。

mac/IE6はダメで、NN7は正常に表示されました。

[23] mixiユーザー 04月17日 20:11

＞藤田イサヲさん、どうもです。

ためしてみましたが、写真のようになりました。
右側の文字数がすくない場合はMAC上では若干の
ずれはありますが問題なく表示されるようです。

[24] mixiユーザー 04月17日 20:35

はじめましてこんにちは。
割り込ませていただきます。

私も同様なデザインをしたことがあり、
非常に苦しんだことがありますが、
CSSの仕様上、これといった方法はなかった気がします。

後はやはり、力技で下記のようにする方法しか思いつきません……。
（縦のセンタリングもできなくて困った経験も……。）

.right{
　padding:25px 0 0 0;
}

とはいえ、フォントサイズなどを変えると、意味がなくなってしまいますが……。

回答になってなくてスミマセンでした。

[25] mixiユーザー 04月17日 23:49

JavaScriptで表に書き換えてしまうのは卑怯ですか？

[27] mixiユーザー 04月18日 02:20

文法的には間違っているのかもしれませんが...f(^^;

#wrap{display:table;}
.left{display:table-cell;}
.right{display:table-cell;}

で、MacIEのみハックで{position:absolute; bottom:0;}を指定。

背景に色をつけたい場合などはもうひと工夫必要でしょうが...。

[28] mixiユーザー 04月20日 21:22

＞せいじさん
やっぱりこの問題で困っている人は多いんですね。
podding:?em;などで下にずらしても、一時しのぎに
しかなりませんね。難しいもんです。
どうもありがとうございました。

[29] mixiユーザー 04月20日 21:25

＞飴さん

セルを一行増やして無理矢理固定
というのは具体的にどうすればいいんでしょうか。
height指定系は、テキスト量が流動的に変化する
ので、やはり難しいです。

[30] mixiユーザー 04月20日 21:32

＞ginnezさん

#wrap{display:table;
width:300px;
}
.left{display:table-cell;
width:150px;
}
.right{display:table-cell;
vertical-align:bottom;
width:150px;
}

とすると、NN7では希望道理の表示になりました。
もちろんIE6では無茶な表示でしたが。文法的な問題
もおっしゃるとおりありますので、実用性は低い
かなと思います。どうもありがとうございました。

[32] mixiユーザー 04月22日 00:22

＞ささきさん、こんにちは

こちらの環境でも、
Win/IE6,FF,NN7,OP Mac/IE,NN7,safari(OSX),FF(OSX)
で、right部分の文字量を増やしても崩れず、
きちんと表示されました。

いやあ、皆さんどうもありがとうございました。

ログインすると、残り3件のコメントが見れるよ