ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

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

  • mixiチェック
  • このエントリーをはてなブックマークに追加
初めまして、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)

.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値も入れるとか。
.rightと.leftの内容に入るテキスト量が、それぞれどんな案配なのかによって提示できる案が変わってきそうな気がします。例えば、.leftの内容にモッサリとテキストがあって、その最終行の右あたりに.rightのテキストをちょこっと添えたいだとか。
tableの例ですが、高さを明示しなくとも、片方のセルのテキスト量がもう片方のテキスト量と差があれば、valignを指定する意味は出てきますので、おそらくそういうことではないかと。

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

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

のような感じにすれば、似たような表示は得られると思います。
タカコさん、ありがとうございます。

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

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

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

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

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

左右で高低差が出る予定です。
ハマタロウさん、どうもです。

http://www.brnet.co.jp/BRnet/stylesheet/box002.html
このサイト、とてもためになりました。
やはり無理なんですかね。
>左右で高低差が出る予定

となると、4で示したpositionを用いた方法で、近い表現になるのではないかとおもいます。
かわち丸さん、度々ありがとうございます。

#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などいれると変化がでる
んですが、絶えず下に張り付いていて欲しいんです。
連続で沢山書き込みしてしまってすいません。
分かりやすく理想図を、画像化してみました。
>内田さん
.rightは
position: relative;
じゃなくて
position:absolute;
にするとどうでしょうか?
こんな感じになりましたけど。

<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;
}
4 のかわち丸さんの方法ですが、

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

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

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

上で紹介されているサイトの例も、positionプロパティ使えば実現できると思うのですが。
さくらぎけいさん、ありがとうございます。

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

NN7では理想図のようになったのですが、IEでは
張り付けた画像のようになってしまいました。
にゃむ@スタッフ募集さん、わざわざ画像作成ありがとう
ございます。

同じ条件で作成しましたが、IE/NNともにうまく表示され
ませんでした。MAC/WINともにうまく表示されるようにしたいと
思っています。
ie/nnのバージョンは?
win XP/Opera8.54、win/ff1.5.0.1.、
win/ie 6.0.29も
にゃむ@スタッフ募集さんと同じ表示になりました。
これ以外のブラウザ環境でのテストですか?
>タカコさん
こちらはIE6,NN7ともにmacです。
win環境ではまだ見ていません。
脇からいきなり机上の空論ですみませんが、

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

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

もう少し検証してみますか・・・。
ごめんなさい。4の方法、.rightにpositionプロパティ記述し忘れてましたね。

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

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

みたくして、それっぽい位置に調整するとか。
こういうのはどうでしょう?初心者考えですいません。

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

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

.right {
margin:-1em 0 0 50%;
}
NKJGさん、ありがとうございます。
実験してみましたが、「書き込み14」の
ような図柄になりました。

mac/IE6はダメで、NN7は正常に表示されました。
>藤田イサヲさん、どうもです。

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

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

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

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

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

回答になってなくてスミマセンでした。
JavaScriptで表に書き換えてしまうのは卑怯ですか?
文法的には間違っているのかもしれませんが...f(^^;

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

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

背景に色をつけたい場合などはもうひと工夫必要でしょうが...。
>せいじさん
やっぱりこの問題で困っている人は多いんですね。
podding:?em;などで下にずらしても、一時しのぎに
しかなりませんね。難しいもんです。
どうもありがとうございました。
>飴さん

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

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

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

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

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

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

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング