固定位置div的頂部到父母的底部div

我正在使用相對絕對定位來定位父div div a內的子div b。我知道如何將它們的底邊對齊放置，使用bottom：0px，但我需要它們的位置，使B的頂部與A的底部對齊，如下圖所示。

有沒有什麼辦法做到這一點在CSS中，因爲我不能確定B的高度。我目前的CSS是低於。

目的 -

Diagram

HTML -

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

CSS -

#a{ 
    position: relative; 
} 

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

來源

2011-07-27 Michael Allen

你說你不知道b的高度。你知道一個高度嗎？ – Chowlett

你可以用邊距來做到這一點，但是，如果你想將它們排列在彼此之外，爲什麼把b放在首位呢？兩個父母的容器都不適合這個任務嗎？ – Semyazas

「但我需要它們來定位，以便B的頂部與B的底部對齊」 - 您的意思是：「...... B的頂部與A的底部對齊」。 – dylanfm

我覺得你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 
}

來源

2011-07-27 12:57:51 thirtydot

賓果。我第二次提出的另一種解決方案是保證金最高：100％; top：0px; –

-1

如果你不知道的高度，

ÿ 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/

來源

2011-07-27 12:45:45

在我指定的問題中，我不知道B的高度。事實上，我不能確定A的高度。 –

是的我知道，我在回答中提到'b'取決於'a'的高度。沒有指定的高度，我們無法在主div內重新定位div。 –

如果您不知道密鑰，那麼您必須將div'b'定位在div'a'之外以實現您的目標。 –

固定位置div的頂部到父母的底部div

回答

相關問題