cssで「下よせ」ってどうやっていますか？

質問

フロートのレフト、ライトはいいとして、

あるボックス要素内（Ａ）に異なるボックス要素（Ｂ）をいれます。
この（Ｂ）を（Ａ）の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか？

いいアイデアをご教授ください。

回答No.1

OKwebb · ベストアンサー

こんなのはどうかな？

position: absolute;
bottom: 0px;

補足

absoluteだと絶対位置になるので、いろいろなクラスで
併用ができないですよね。

しかも、あるボックス内に対して絶対位置ならいいのですが、
ウィンドウ全体に対しての絶対位置になりますよね。

とりあえずできないです。

間違いありましたら指摘おねがいいします。

わざわざ回答ありがとうございます。

回答No.3

aboutworks

もう、回答が出ちゃってるけど。
一応、サンプル。

<div class="A">
<div class="B">
<p>ほげほげ</p>
</div>
</div>

div.A
{
background-color : orange ;
height : 200px ;
width : 300px ;
position : relative ;
}

div.B
{
height : 120px ;
width : 200px ;
background-color : white ;
color : black ;
position : absolute ;
bottom : 0 ;
left : 50px ;
}

こんな感じかな。

お礼

わたしの理解不足で申し訳ありません。

参考にさせていただきます。

ありがとうございました。

回答No.2

steel_gray

親BOXのセレクタ {
display:table-cell;
vertical-align:bottom;
}
と、すればほとんどのブラウザでは解決するのですが、IEが display:table-cell; を無視してくれるのでこれは今のところ実用的ではないです。

#1さんの回答は親ブロックの底からの配置にもできます。

親BOXのセレクタ {
position:relative; // ← ※
}
子BOXのセレクタ {
position: absolute;
bottom: 0;
}

※ 詳しい理屈は以下を。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#containing-block-details

いろいろなクラスで、というのがよくわかりませんが、
下寄せならば、下から0の位置で問題ないのでは？

補足

わたしの理解不足で申し訳ありません。

参考にさせていただきます。

ありがとうございました。