對齊一個盒子，在底部而不是頂部

Question

我正在尋找一種方式來將div對齊到底部而不是頂部，例如，如果您嘗試使用class =「box」來移除部分div， 「在這個小提琴

目前代碼：

#holder { 
    height: 220px; 
    width: 50px; 
    background-color: #000000; 
    padding: 5px 10px 10px 10px; 
} 

.box { 
    height: 50px; 
    width: 50px; 
    background-color: #ffffff; 
    margin-top: 5px; 
} 

它會從底部移除格，我想改變這種行爲，以便從頂部移除來代替。

http://jsfiddle.net/79L7Lud7/

Answer 1

頁面元素流從頂部到底部，從左至右。

要操縱這一點，您基本上需要將元素從正常流程中取出，並且position：absolute是執行此操作的更簡單方法之一。

例如：

#holder {position: absolute; bottom: 0;} 

唯一額外你需要使用這種方法是一種外部支架預留頁面空間。

http://jsfiddle.net/79L7Lud7/4/

Answer 2

一般來說元件對準對於其它元件的頂部。對齊底部的最好方法是將您所稱的「保留」元素視爲表格，然後您可以將元素對齊到底部。

#holder { 
    display:table-cell; 
    vertical-align: bottom; 

    height: 220px; 
    width: 50px; 
    background-color: #000000; 
    padding: 5px 10px 10px 10px; 

}

請參閱小提琴http://jsfiddle.net/79L7Lud7/3/。

這不適用於IE7。對於IE7支持，您可能想要考慮絕對定位。

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

http://jsfiddle.net/79L7Lud7/3/