2011-07-27 19 views
3

divの配置に関して面白い問題があります。Fixed Divの一番上を親のdivの下に配置します。

親divの内側に子div bを配置する相対的な絶対配置を使用しています。私はボトム:0pxを使ってボトムエッジを整列させる方法を知っていますが、下の図に示すようにBの上端がAのボトムに揃うようにボクセルを配置する必要があります。

私はCSSの高さを確認できないので、CSSでこれを行う方法はありますか?私の現在のCSSは以下の通りです。

目指す -

Diagram

HTML -

<div id="a"> 
    <div id="b"> </div> 
</div> 

CSS -

#a{ 
    position: relative; 
} 

#b{ 
    position: absolute; 
    bottom:0px; 
} 
+0

あなたはあなたがbの高さを知らないと言う。あなたはaの高さを知っていますか? – Chowlett

+1

あなたはマージンを使ってそれを行うことができますが、それらをお互いの外側に整列させたいのであれば、最初にbをaの内側に置くのはなぜですか?両方の周りの親コンテナcはこのタスクにもっと適していませんか? – Semyazas

+1

"しかし、私はBの上端がBの下端に揃うように配置する必要があります - " ... Bの上端がAの下端に揃えられています "。 – dylanfm

答えて

11

私はあなたがtop: 100%後にしていると思う:http://jsfiddle.net/ysafx/

#a { 
    position: relative; 
    outline: 1px solid red 
} 

#b { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    margin-top: 5px; 
    outline: 1px solid blue 
} 
+0

ビンゴを更新しました。私がもう一度前に出た別の解決策は、margin-top:100%です。 top:0px; –

-1

あなたは高さがわからない場合は、

Y OUには、このようなコードを記述する必要があります。

CSS:

#a { 
    position: relative; 
    background: black; 
    color: #fff;  
} 

#b { 
    position: relative; 
    background: blue; 
    color: #fff; 
} 

HTML:

<div id="a"> 
    // Your code inside a 
</div> 
<div id="b"> 
    // your code inside b 
</div> 

デモを参照してください:http://jsfiddle.net/rathoreahsan/cKsVK/

+0

私はBの高さを知らないと指定した質問では、実際には私はAの高さを確信することはできません。 –

+0

はい私の答えでは、「b」は「a」の高さに依存すると言いました。指定された高さがなければ、メインdiv内のdivの位置を変更することはできません。 –

+0

あなたが目標を分かっていない場合は、あなたの目標を達成するためにdiv 'a'の外側にdiv 'b'を配置する必要があります。 –

関連する問題