位置div到不同div的底部，不使用絕對

Question

我在另一個div中有一個div。內部div的邊距爲0，自動將其集中。但是，我無法讓它在沒有絕對的情況下浮到底部。有沒有辦法讓一個相對的div浮動到正常的div底部？

Answer 1

不使用position: absolute，你必須垂直對齊它。

可以使用vertical-align: bottom，其根據the docs：

的垂直對齊CSS屬性指定內嵌或表格盒的垂直對準。

所以，要麼設置外層div作爲一個內聯元素，或作爲table-cell：

#outer { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
} 
 

 
#inner { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>

Answer 2

你可以通過設置到最高值100％的做到這一點。

的Html

<div class="outer"> 
<div class="inner"></div> 
</div> 

CSS

.outer {height:400px;width:400px;background:#eaeaea;} 
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;} 

檢查出這個小提琴這裏：http://jsfiddle.net/62wqufgk/

Answer 3

這種樣式添加到內部DIV。

position: relative; 
top: 100%; 
transform: translateY(-100%); 

Answer 4

我發現的唯一辦法，除非你的內容是靜態的高度，是用jQuery做它像這樣：

$(document).ready(function(){ 
    inner_height = $('#inner-div').height(); 
    outer_height = $('#outer-div').height(); 
    margin_calc = (outer_height - inner_height) 
    $('#inner-div').css('margin-top', (margin_calc+'px')); 
}); 

這將爲列-DIV一，載有內工作div，如果另一列的高度較大。

令人不可思議的是這種簡單的事不是通過CSS屬性「內置」（即「浮動：底部」），不打破一切與絕對，等

Answer 5

現在，你可以簡單地所有這些對齊問題都使用display: flex。

在你的情況下，你可以簡單地讓父母彎曲，彎曲方向column（默認是行）和justify-content: flex-end。這種方法的優點是，如果父項中有多個項目，它也可以工作。

如果您有多個並且希望從父母的開始到結束都對齊它們，則可以將justify-content更改爲另一個屬性，例如space-between或space-evenly。

#outer { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-direction: column; 
 
} 
 

 
#inner { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>